Dynamic require of "@angular/platform-browser" is not supported

[Evincars]

Which @angular/* package(s) are the source of the bug?

platform-browser

Is this a regression?

Yes

Description

After the migration to new application executor (Convert to application executor) the application thrown me an "main.js:1 Uncaught Error: Dynamic require of "@angular/platform-browser" is not supported at main.js:1:550". The migration went well - no errors, no warnings.

So I hade to update the main.ts in my app where I previously used platformBrowserDynamic into usage of bootstrapApplication. At least I though that's the problem - anyway main.ts, AppComponent, app-routing.module has been change for standalone usage (so no modules and everything according to docs)

Anyway I am still facing this issue and I don't have any clue why. Previously there was somee issues with tslib (almost identical error message but it has dissapeared after updatint the mian.ts). I tried npm cache clean -f, delete node_modules and install all deps again. Even running nx migrate multiple times - everyting is updated to latest stable.

I also tried offical doc steps for changing the builder just to "esbuild" - but absolutely the same issue (so I don't think so, it's related to Nx).

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

const configPath = 'configuration.local.json';

fetch(configPath)
  .then(res => res.json())
  .then(config => {
    bootstrapApplication(AppComponent, appConfig(config)).catch(err => console.error(err));
  });

package.json:

{
  "name": "cloud-cis",
  "version": "0.6.10",
  "license": "MIT",
  "scripts": {
    "comment-misc": "-------------------------- MISCELLANEOUS --------------------------",
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js",
    "help": "nx help",
    "update": "nx migrate latest",
    "repair": "nx repair",
    "start": "ng serve",
    "build": "nx build --localize",
    "test": "ng test",
    "lint": "nx workspace-lint && ng lint",
    "e2e": "ng e2e",
    "comment-affected": "------------------------ AFFECTED ----------------------------",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "comment-format": "--------------------------- FORMAT -----------------------------",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "comment-serve": "---------------------------- SERVE ------------------------------",
    "start:en": "nx serve --configuration=en",
    "start:sv": "nx serve --configuration=sv",
    "start:fi": "nx serve --configuration=fi",
    "start:nb": "nx serve --configuration=nb",
    "comment-build": "---------------------------- BUILD ------------------------------",
    "build:all": "nx run-many --target=build --all=true --parallel=true",
    "build:en": "nx build --configuration=en",
    "build:sv": "nx build --configuration=sv",
    "build:fi": "nx build --configuration=fi",
    "build:nb": "nx build --configuration=nb",
    "comment-ci": "---------------------------- CI PIPELINE ---------------------------",
    "workspace-generator": "nx workspace-generator",
    "i18n:extract": "nx extract-i18n --output-path locales/poc --format xliff",
    "ci-i18n:extract-poc": "npx nx extract-i18n --project=poc --output-path=locales/poc",
    "ci-api-configuration": "nx workspace-generator local-configuration-merger poc",
    "ci-lint": "npx nx run-many --all --target=lint --parallel",
    "ci-test": "npx nx run-many --all --target=test --coverage --codeCoverage --parallel --detectOpenHandles",
    "ci-build-customer": "npx nx build --prod --localize --output-path=dist/apps/app",
    "ci-build-cloud-cis": "npm run ci-build-customer --customer=app",
    "ci-build": "npm run ci-build-cloud-cis",
    "ci-add-server-config": "nx g @tus-common/nx-workspace-tools:server-config",
    "comment-graph": "--------------------------- DEP-GRAPH ---------------------------",
    "dep-graph": "nx dep-graph",
    "graph:affected:branch": "nx affected:graph --base=master --head=HEAD",
    "graph:affected:commit": "nx affected:graph --base=HEAD~1 --head=HEAD"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "17.3.3",
    "@angular/cdk": "17.3.3",
    "@angular/common": "17.3.3",
    "@angular/compiler": "17.3.3",
    "@angular/core": "17.3.3",
    "@angular/forms": "17.3.3",
    "@angular/localize": "17.3.3",
    "@angular/material": "17.3.3",
    "@angular/material-date-fns-adapter": "17.3.3",
    "@angular/platform-browser": "17.3.3",
    "@angular/platform-browser-dynamic": "17.3.3",
    "@angular/router": "17.3.3",
    "@azure/msal-angular": "^3.0.9",
    "@azure/msal-browser": "^3.6.0",
    "@fontsource/roboto": "5.0.8",
    "@ngrx/component-store": "17.0.1",
    "@ngrx/signals": "^17.1.0",
    "@nx/angular": "18.2.2",
    "@swc/helpers": "0.5.3",
    "ag-charts-angular": "^9.0.1",
    "ag-grid-angular": "^31.0.0",
    "ag-grid-community": "^31.0.0",
    "angular-oauth2-oidc": "^15.0.1",
    "axios": "^1.6.2",
    "debug": "^4.3.4",
    "include-media": "^2.0.0",
    "material-icons": "^1.13.12",
    "object-hash": "^3.0.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.1",
    "tslib": "^2.6.2",
    "uuid": "^9.0.1",
    "zone.js": "0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "17.3.3",
    "@angular-devkit/core": "17.3.3",
    "@angular-devkit/schematics": "17.3.3",
    "@angular-eslint/eslint-plugin": "17.3.0",
    "@angular-eslint/eslint-plugin-template": "17.3.0",
    "@angular-eslint/template-parser": "17.3.0",
    "@angular/cli": "17.3.3",
    "@angular/compiler-cli": "17.3.3",
    "@angular/language-service": "17.3.3",
    "@babel/preset-env": "^7.23.5",
    "@ngrx/signals": "^17.1.0",
    "@ngx-i18nsupport/tooling": "^8.0.3",
    "@nrwl/tao": "18.2.2",
    "@nx/cypress": "18.2.2",
    "@nx/devkit": "18.2.2",
    "@nx/eslint": "18.2.2",
    "@nx/eslint-plugin": "18.2.2",
    "@nx/jest": "18.2.2",
    "@nx/js": "18.2.2",
    "@nx/nest": "18.2.2",
    "@nx/node": "18.2.2",
    "@nx/plugin": "18.2.2",
    "@nx/webpack": "18.2.2",
    "@nx/workspace": "18.2.2",
    "@schematics/angular": "17.3.3",
    "@swc-node/register": "1.8.0",
    "@swc/cli": "~0.1.63",
    "@swc/core": "1.3.100",
    "@types/debug": "^4.1.12",
    "@types/jest": "^29.5.11",
    "@types/node": "^18.16.9",
    "@types/object-hash": "^3.0.6",
    "@types/uuid": "^9.0.7",
    "@typescript-eslint/eslint-plugin": "7.3.0",
    "@typescript-eslint/parser": "7.3.0",
    "ajv": "^8.12.0",
    "cypress": "^13.6.6",
    "dotenv": "16.3.1",
    "eslint": "8.57.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-cypress": "2.15.1",
    "husky": "^8.0.3",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-preset-angular": "14.0.3",
    "jest-sonar": "^0.2.16",
    "jsonc-eslint-parser": "^2.1.0",
    "npm-check-updates": "^16.14.11",
    "nx": "18.2.2",
    "nx-cloud": "18.0.0",
    "prettier": "3.1.0",
    "ts-jest": "29.1.1",
    "ts-node": "10.9.1",
    "typescript": "5.4.4"
  }
}

project.json

{
  "name": "poc",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "sourceRoot": "apps/poc/src",
  "prefix": "cloud-cis",
  "i18n": {
    "sourceLocale": "en",
    "locales": {
      "fi": {
        "translation": "locales/poc/messages.fi.xlf",
        "baseHref": "/fi/"
      },
      "sv": {
        "translation": "locales/poc/messages.sv.xlf",
        "baseHref": "/sv/"
      },
      "nb": {
        "translation": "locales/poc/messages.nb.xlf",
        "baseHref": "/nb/"
      }
    }
  },
  "tags": ["scope:poc", "type:app"],
  "targets": {
    "xliffmerge": {
      "executor": "@ngx-i18nsupport/tooling:xliffmerge",
      "options": {
        "xliffmergeOptions": {
          "srcDir": "locales/poc",
          "genDir": "locales/poc",
          "i18nFile": "messages.xlf",
          "i18nBaseFile": "messages",
          "i18nFormat": "xlf",
          "encoding": "UTF-8",
          "defaultLanguage": "en",
          "languages": ["nb", "fi", "sv"],
          "allowIdChange": true,
          "beautifyOutput": true,
          "removeUnusedIds": true
        }
      }
    },
    "build": {
      "executor": "@angular-devkit/build-angular:application",
      "options": {
        "index": "apps/poc/src/index.html",
        "browser": "apps/poc/src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "apps/poc/tsconfig.app.json",
        "allowedCommonJsDependencies": ["*"],
        "localize": ["en"],
        "i18nMissingTranslation": "warning",
        "outputPath": {
          "base": "dist/apps/app"
        },
        "assets": [
          "apps/poc/src/favicon.png",
          "apps/poc/src/assets",
          "apps/poc/src/configuration.local.json",
          {
            "glob": "configuration.json.j2",
            "input": "apps/poc/src",
            "output": "."
          }
        ],
        "styles": ["libs/styles/src/index.scss", "apps/poc/src/styles.scss"],
        "scripts": [],
        "sourceMap": true
      },
      "configurations": {
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "baseHref": "/",
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "5.5mb",
              "maximumError": "6mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        },
        "en": {
          "localize": ["en"]
        },
        "fi": {
          "localize": ["fi"]
        },
        "sv": {
          "localize": ["sv"]
        },
        "nb": {
          "localize": ["nb"]
        }
      }
    },
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "options": {
        "buildTarget": "poc:build"
      },
      "configurations": {
        "production": {
          "buildTarget": "poc:build:production"
        },
        "en": {
          "buildTarget": "poc:build:en"
        },
        "fi": {
          "buildTarget": "poc:build:fi"
        },
        "sv": {
          "buildTarget": "poc:build:sv"
        },
        "nb": {
          "buildTarget": "poc:build:nb"
        }
      }
    },
    "extract-i18n": {
      "executor": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "buildTarget": "poc:build"
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "outputs": ["{options.outputFile}"]
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/apps/poc"],
      "options": {
        "jestConfig": "apps/poc/jest.config.js",
        "passWithNoTests": true
      }
    }
  }
}

Please provide a link to a minimal reproduction of the bug

Well, repro steps for Nx are:

1. nx generate convert-to-application-executor
2. nx s
3. 'success build'
4. open localhost:4200
5. 'given error'

Repro steps for manuall conversion from browser to browser-esbuild:

1. In project.json edit line:

• "builder": "@angular-devkit/build-angular:browser",
• into: "builder": "@angular-devkit/build-angular:browser-esbuild",

2. nx s
3. 'success build'
4. open localhost:4200
5. 'given error'

Please provide the exception or error you saw

Error: Dynamic require of "@angular/platform-browser" is not supported
    at main.js:1:550
    at main.ts:1:1
    at main.js:1:827
    at main.ts:19:4

Please provide the environment you discovered this bug in (run ng version)

Nx Version:

• Local: v18.2.2
• Global: v18.2.2

Anything else?

No response

[JoostK]

Without a reproduction, it's impossible to tell where this import is coming from

[Evincars]

Well, repro steps for Nx are:

1. nx generate convert-to-application-executor
2. nx s
3. 'success build'
4. open localhost:4200
5. 'given error'

Repro steps for manuall conversion from browser to browser-esbuild:

1. In project.json edit line:
   • "builder": "@angular-devkit/build-angular:browser",
   • into: "builder": "@angular-devkit/build-angular:browser-esbuild",
2. nx s
3. 'success build'
4. open localhost:4200
5. 'given error'

[alxhub]

I'm going to transfer this issue to our CLI repo, but I suspect you may end up needing to file it as an issue on NX, unless you can reproduce the problem in the CLI itself.

[Evincars]

I opened the issue in Nx repo: nrwl/nx#22712

[Evincars]

For better overview, here's GIF of repro steps. Plus screen of what main.js link in console.log refers to (if it helps with something)

[JoostK]

Here's a bare setup where bootstrapApplication is within a promise then callback: StackBlitz. Both ng serve and ng serve --configuration production don't show this issue. Again, without a reproduction this won't be actionable from our end.

[Evincars]

Here: I've cleared the company's code and keep only the wrapper of the app. It should throw the error when you open the app.
https://github.com/pr033r/angular-issue

[Evincars]

I think that I found the solution. Maybe due to failed migration command (at least I'm expecting that those things will be fixed/migrated/rewrited) but the issues was in tsconfig.base.ts file. When I copied it from newly created project, It started working and the error message is no longer there.

Here's the commit. Check for tsconfig.base.ts

[JoostK]

Interesting. The tsconfig.base.ts includes TypeScript options module and target in angularCompilerOptions, which happens to somewhat work due to an implementation quirk. Those options should be included in compilerOptions.

The crucial part that breaks things here is "module": "commonjs", and because it's present in angularCompilerOptions it doesn't follow the regular config cascade: although it's defined in the root tsconfig, it overrides the derived values in inherited tsconfig files—Angular reads the configuration hierarchy in two phases: first resolving the angularCompilerOptions hierarchy, then letting TypeScript load its config file with the angularCompilerOptions on top.

The CLI doesn't really support CommonJS output anymore, which is ultimately the reason why this breaks. The CLI could perhaps detect this as a warning and ignore it in favor of es2022, just like it does when target is set to an unsupported variant.

[JoostK]

Concretely, this is not an Nx issue so you can close the issue over there. That said, the esbuild conversion schematic is unlikely to be updated to account for this, as 1) it wouldn't be aware of those TS options in angularCompilerOptions (they really do not belong there!) and 2) there's plenty potential reasons why esbuild may behave differently to Webpack; the CLI will never be able to account for all of it.

[Evincars]

The project has been created like almost 3 years ago by different dev. I am managing this project last 1.5 year so I am surprised that any migration didn't pop up some warn/error at least 😀.

Actually, I was also wondering If I should create a new project from sratch and move all libs from old project to the new one. But it's too much work and effort. If there'd be some script to transfer all project confs files into latest schemas/formats it'd be perfect (and devs who are managing some older created projects would be calmer - that they're using updated and latest schemas/configs etc.)

Anyway, thanks for your time and effort guys. I appreciate it 😊