How to migrate from "@angular-devkit/build-angular:application" to "@nx/angular:application"

[jase88]

Hi,

I'm trying to switch from @angular-devkit/build-angular:application to @nx/angular:application be able to use esbuild plugins.

Is there a way to automatically migrate it? I tried nx g @nx/angular:convert-to-application-executor --project=my-project --dry-run, but it doesn't seem to support @angular-devkit/build-angular:application and warns:

The provided project "my-project" does not have any targets using on of the '@angular-devkit/build-angular:browser', '@angular-devkit/build-angular:browser-esbuild', '@nx/angular:browser' and '@nx/angular:browser-esbuild' executors. Skipping conversion.

If I just replace the executor manually in the project.json, I get warnings for several files and the app doesn't run

index.js:489 [webpack-dev-server] WARNING
/Users/jase88/src/my-project/libs/shortened/src/lib/something.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

webpack-dev-server is confusing, since the documentation of @nx/angular:application states that is uses esbuild.

Any idea what could be configured wrongly?

[leosvelperez]

If I just replace the executor manually in the project.json, I get warnings for several files and the app doesn't run

index.js:489 [webpack-dev-server] WARNING
/Users/jase88/src/my-project/libs/shortened/src/lib/something.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

webpack-dev-server is confusing, since the documentation of @nx/angular:application states that is uses esbuild.

To build your apps using the @nx/angular:application executor, you also need to change your serve targets executor to @nx/angular:dev-server. The @angular-devkit/build-angular:dev-server has some builtin logic that will always default to use a Webpack build pipeline when the build target is using an unknown executor/builder (unknown to the Angular CLI, which is the case for Nx executors).

Is there a way to automatically migrate it? I tried nx g @nx/angular:convert-to-application-executor --project=my-project --dry-run, but it doesn't seem to support @angular-devkit/build-angular:application and warns:

As mentioned in the warning, the @nx/angular:convert-to-application-executor is meant to convert targets using one of @angular-devkit/build-angular:browser, @angular-devkit/build-angular:browser-esbuild, @nx/angular:browser and @nx/angular:browser-esbuild. This is explained in the generator documentation: https://nx.dev/nx-api/angular/generators/convert-to-application-executor.

That said, I think it makes sense to support converting from the @angular-devkit/build-angular:application to @nx/angular:application 🤔

[jase88]

Thanks! Also switching the serve target executor worked - forgot about this one.
Automatic converting or documentation around it would be nice 😀

[lppedd]

@leosvelperez thank you! Do we also have to touch @angular-devkit/build-angular:extract-i18n?