Angular 8 - Lazy loading modules : Error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'

Question

When I updated Angular from 7 to Angular 8, getting error for lazy loading modules

I have tried the options, which are there in the angular upgradation guide

Made the below changes:

Before

    loadChildren: '../feature/path/sample- 
                         tage.module#SameTagModule'

After

   loadChildren: () => import('../feature/path/sample- 
                      tags.module').then(m => m.CreateLinksModule)

error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.

Solution 1

You are using dynamic import so you have to change your tsconfig.json like this to target your code to esnext module

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext", // add this line
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Also make sure to check tsconfig.app.json dont have module and target config something like this

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

Solution 2

Just want to add my experience to @Tony's answer. After changing tsconfig.json it still showed an error (red underline). Only after reopening the editor (I used VSCode) did I see the red underline disappear.

Solution 3

Just adding to @Tony's anwser, you might also need to do the same (change to "module": "esnext" ) in the tsconfig.app.json. In my case the tsconfig.json was already using esnext as the module but the tsconfig.app.json was still using es2015 and that caused this error.

Solution 4

I think the proper way to do this is to adjust tsconfig.app.json rather than tsconfig.json.

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "esnext",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.app.json is the Typescript configuration file specific to the app that sits beneath the root of the Angular workspace. The tsconfig.app.json exists so that if you are building an Angular workspace that has multiple apps in it, you can adjust the Typescript configuration separately for each app without having to write redundant configuration properties that overlap between the apps (hence the extends property).

Technically, you don't need tsconfig.app.json at all. If you delete it, you will have to place the "module": "esnext" in tsconfig.json. If you keep it there, it will take precedence over tsconfig.json, so you only need to add the "module":"esnext" line in tsconfig.app.json.

Solution 5

I resolved this issue only by adding "include": ["src/**/*.ts"] in my tsconfig.app.json file.

View more solutions

Comments

[Post Impatica]

ng new doesn't use this by default. Is there a reason?

[Post Impatica]

It seems to work in Edge, Chrome, Firefox and IE11 when I uncomment the IE11 section in polyfills so I'm happy.

[RajuPedda]

We can avoid adding "module": "esnext" in the both the files, we can put it in tsconfig.json but not in tsconfig.app.json, as this is already extending the tsconfig.json.

[ranbuch]

I had to remove the "module": "es2015" line from my tsconfig.app.json file

[Alfa Bravo]

@ranbuch, I had the same problem but did not remove the line, I just changed it to "module": "esnext" as well.

[Gaurav Aggarwal]

still facing the same problem event after updating tsconfig.json file

[Tony Ngo]

did you already restart your server ? also check your tsconfig.app.json too

[Stephane]

The target is still es2015 ?

[Tony Ngo]

You can target es2015 for modern browser

[Mark]

I dont have tsconfig.app.json file. Should I create one?

[Bi Wu]

Yes, please refer this. stackoverflow.com/questions/36916989/…

[RDV]

Yes, I had to add module: 'esnext' in both tsconfig.json and tsconfig.app.json

[NieMaszNic]

In IDEA Intelij I had the same issue. You need to reopen the project.

[Ashok M A]

for me it was tsconfig-aot.json. I have changed it to esnext from es2015

[Andy Corman]

Note that what I believe Tony (OP) meant in his second paragraph was "Make sure that you don't also have a tsconfig.app.json file with a second module declaration that's overriding your main tsconfig.json. I was confused until I found this guide, which essentially said the same thing but made more sense: icetutor.com/question/…

[Shailesh Pratapwar]

Yeah. You saved my day.

[Julio W.]

Thanks. I had this too.

[Kareem Jeiroudi]

I agree to @Zach's answer. Always use the most specific Typescript configuration file, unless of course they all share the same configuration, but that's most likely not the case.

[Andrew Howard]

One thing to note, your intelliense using VS code can get stuck after making this change, so I had to restart my machine and it was fine then.