`ionic serve` throws an error after migrating to Angular 17 + vite and esbuild

[StefanNedelchev]

Description: I migrated my current ionic project to Angular 17 and updated the config so it uses esbuild now. Running ionic build works just fine. Running ionic serve also works fine during the build phase but after open the app it doesn't work and I see an error thrown in the console. The project doesn't have Android or iOS platforms added - only web.

Steps to Reproduce: Update an existing Angular project with ionic to v17 or add ionic to a brand new Angular 17 project.

Output:

[ng]   ➜  Local:   http://localhost:8100/
[ng] 22:41:41 [vite] warning: 
[ng] /home/stefan/Projects/Tikomi/sleda-hybrid/.angular/cache/17.0.0/vite/deps/chunk-DDWF7IQ7.js
[ng] 2572|      return i[n];
[ng] 2573|    }
[ng] 2574|    return import("./".concat(a, ".entry.js").concat("")).then(function(e2) {
[ng]    |                  ^
[ng] 2575|      {
[ng] 2576|        cmpModules.set(a, e2);
[ng] The above dynamic import cannot be analyzed by Vite.
[ng] See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
[ng] 
[ng]   Plugin: vite:import-analysis
[ng]   File: /home/stefan/Projects/................./.angular/cache/17.0.0/vite/deps/chunk-DDWF7IQ7.js?v=cfdc3acc

My ionic info:

WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - /usr/lib/node_modules/@ionic/cli/lib/project/index.js
   - /usr/lib/node_modules/@ionic/cli/lib/index.js
   - /usr/lib/node_modules/@ionic/cli/index.js
   - /usr/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   - /usr/lib/node_modules/@ionic/cli/lib/project/index.js
   - /usr/lib/node_modules/@ionic/cli/lib/index.js
   - /usr/lib/node_modules/@ionic/cli/index.js
   - /usr/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.1.5 (/usr/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.5.4 @angular-devkit/build-angular : 17.0.0 @angular-devkit/schematics : 16.2.10 @angular/cli : 17.0.0 @ionic/angular-toolkit : 10.0.0

Capacitor:

Capacitor CLI : 5.5.1 @capacitor/android : not installed @capacitor/core : 5.5.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v18.17.1 (/usr/bin/node) npm : 9.8.1 OS : Linux 6.2

Other Information:

[liamdebeasi]

Where is the source of the code that Vite is erroring on? The error does not say if it's coming from Ionic software or something else.

[ahmadtawakol]

Getting same exact issue also after updating to Angular 17 and updating the config to use ESBuild

[ahmadtawakol]

I was able to fix this error by updating @ionic/angular to version 7.5.x and converting my app to use Ionic standalone components. More info can be found here.

[liamdebeasi]

@StefanNedelchev Are you using Ionic standalone components or IonicModule? ESBuild/Vite only works with Ionic standalone components.

[StefanNedelchev]

@StefanNedelchev Are you using Ionic standalone components or IonicModule? ESBuild/Vite only works with Ionic standalone components.

I use IonicModule. Thanks for the info, I'll try migrating to Ionic standalone components

[liamdebeasi]

Thanks for the follow up. I'm going to close this since we do not support ESBuild/Vite + IonicModule, but let me know if you have further questions.

[Lyfei]

If you create a project with an older version of the CLI, this problem will also occur. As a reminder to future generations, update to the latest version and choose standalone component mode when creating a new project, which saves a bit of page conversion. It is not recommended to upgrade directly from the old project, but to create the project with the new version, copy the code from the old project, and adjust it according to the new writing.