unable to start angular app due to unkwown error

Question

I am getting the following error::

Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'es2022', 'esnext', 'commonjs', 'amd', 'system', 'umd', 'node16', or 'nodenext'.

14    { path: "auth", loadChildren: ()=> import("./auth/auth.module").then(m=>m.AuthModule)},

this is the file that is giving me the issue:

const routes: Routes = [
  { path: "", component: PostListComponent },
  { path: "create", component: PostCreateComponent, canActivate: [AuthGuard] },
  { path: "edit/:postId", component: PostCreateComponent, canActivate: [AuthGuard] },
  // { path: "auth", loadChildren: "./auth/auth.module#AuthModule"}, // old line being replaced

   { path: "auth", loadChildren: ()=> import("./auth/auth.module").then(m=>m.AuthModule)},   // new line that replaced old line
  { path: "jobCreate", component: JobCreateComponent, canActivate: [AuthGuard]},

];

I found this article online that had the same issue I had:: https://bobbyhadz.com/blog/typescript-dynamic-imports-only-supported-when-module Angular 8 - Lazy loading modules : Error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'

I tried to modify the tsconfig.json file to the following::

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "commonjs", // ️ set to esnext
 // "module": "esnext", // I tried this and it didnt work either
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

question: how do i fix this? I am not sure which node_module this is dependent on, but could I possible reverse to a earlier version to avoid this issue?

unable to start angular app due to unkwown error

0 Answers0