Angular: Failed to fetch dynamically imported module .angular/cache/17.0.8/vite/deps/ion-app_8.entry.js?import

[fasidOnGit]

Describe the bug
The Ionic Angular app successfully complies however, when I open the app in browser, It doesn't load and I see a lot of errors in console.

Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep)

To Reproduce
Steps to reproduce the behavior:

1. Run npx create-nx-workspace
2. Run npm install --save-dev --exact @nxext/ionic-angular in project folder
3. Run nx generate @nxext/ionic-angular:application myApp
4. Run the app in development mode. nx run my-app:serve:development
5. After compiling successfully, Open http://localhost:4200
6. Open the DevConsole, you can see the aforementioned errors.
   Expected behavior
   A clear and concise description of what you expected to happen.
   I can see the app loaded in browser successfully and not see a white screen.

Additional context
Add any other context about the problem here.

"dependencies": {
    "@angular/animations": "~17.0.0",
    "@angular/common": "~17.0.0",
    "@angular/compiler": "~17.0.0",
    "@angular/core": "~17.0.0",
    "@angular/forms": "~17.0.0",
    "@angular/platform-browser": "~17.0.0",
    "@angular/platform-browser-dynamic": "~17.0.0",
    "@angular/router": "~17.0.0",
    "@capacitor/core": "^5.0.3",
    "@capacitor/haptics": "5.0.2",
    "@capacitor/keyboard": "5.0.2",
    "@capacitor/status-bar": "5.0.2",
    "@ionic/angular": "^7.0.0",
    "@nestjs/common": "^10.0.2",
    "@nestjs/core": "^10.0.2",
    "@nestjs/platform-express": "^10.0.2",
    "axios": "^1.0.0",
    "ionicons": "^7.0.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.0.0",
    "@angular-devkit/core": "~17.0.0",
    "@angular-devkit/schematics": "~17.0.0",
    "@angular-eslint/eslint-plugin": "~17.0.0",
    "@angular-eslint/eslint-plugin-template": "~17.0.0",
    "@angular-eslint/template-parser": "~17.0.0",
    "@angular/cli": "~17.0.0",
    "@angular/compiler-cli": "~17.0.0",
    "@angular/language-service": "~17.0.0",
    "@capacitor/android": "^5.0.3",
    "@capacitor/cli": "^5.0.3",
    "@capacitor/ios": "^5.0.3",
    "@nestjs/schematics": "^10.0.1",
    "@nestjs/testing": "^10.0.2",
    "@nx/cypress": "17.2.7",
    "@nx/eslint": "17.2.7",
    "@nx/eslint-plugin": "17.2.7",
    "@nx/jest": "17.2.7",
    "@nx/js": "17.2.7",
    "@nx/nest": "17.2.7",
    "@nx/node": "17.2.7",
    "@nx/web": "17.2.7",
    "@nx/webpack": "17.2.7",
    "@nx/workspace": "17.2.7",
    "@nxext/ionic-angular": "^17.0.1",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "@schematics/angular": "~17.0.0",
    "@svgr/webpack": "^8.0.1",
    "@swc-node/register": "~1.6.7",
    "@swc/core": "~1.3.85",
    "@types/jest": "^29.4.0",
    "@types/node": "18.16.9",
    "@typescript-eslint/eslint-plugin": "^6.9.1",
    "@typescript-eslint/parser": "^6.9.1",
    "cypress": "^13.0.0",
    "eslint": "~8.48.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-cypress": "^2.13.4",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "jest-preset-angular": "~13.1.4",
    "jsonc-eslint-parser": "^2.1.0",
    "nx": "17.2.7",
    "prettier": "^2.6.2",
    "react-refresh": "^0.10.0",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.2.2",
    "url-loader": "^4.1.1"
  }

[adyngom]

This bug haunted me for most one week but thankfully @mhartington made a quick fix by transition the Angular project to standalone. I know @DominikPieper is aware of it and I'm waiting on their directions to take on the next step. I'll gladly offer to make the fix following Mike's code if they feel it is the right way to go about a definite solution for this

[mraj99123456789]

this issue is painful fix it faster please

[RyanClementsHax]

This seems to be an issue with angular's integration with vite. This same issue was opened up on Ionic's repo, but they neglected to fix it as, at the time they wrote that comment, this integration wasn't production ready and the default webpack solution is working ok.

I've confirmed that the webpack based solution works fine in our case.

To fix the angular application that gets created, you need to change two lines in the project's project.json

{
  "name": "mobile-app",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "prefix": "my-mobile-app",
  "sourceRoot": "apps/mobile-app/src",
  "tags": [],
  "targets": {
    "build": {
-     "executor": "@angular-devkit/build-angular:application",
+     "executor": "@angular-devkit/build-angular:browser",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/mobile-app",
        "index": "apps/mobile-app/src/index.html",
-       "browser": "apps/mobile-app/src/main.ts",
+       "main": "apps/mobile-app/src/main.ts",

The first change is to change the executor from application, which builds using esbuild, to browser, which builds using webpack. More details can be found on the docs.

The second change is to update the browser option to main as the entry file config is different between the two executors.

Going forward, the template should probably use the webpack builder and the issue opened either on ionic or angular's side. The issue might be related to another open issue angular has.

[mraj99123456789]

@RyanClementsHax Thanks for the tip will work on it hopefully something concrete will come up

[mraj99123456789]

@RyanClementsHax Thanks Sir it worked !!!🤣😂

[mevatron]

@RyanClementsHax I second the thanks 🥳 This definitely corrects the issue!

[dominic-mallo]

It works!