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'.

Tony Ngo · Accepted Answer · 2020-01-31T08:25:46.730

324

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"
  ]
}

edited Jan 31 '20 at 08:25

answered May 30 '19 at 09:56

Tony Ngo

19,166
4
38
60

4

`ng new` doesn't use this by default. Is there a reason? – Post Impatica May 30 '19 at 13:08
2

It seems to work in Edge, Chrome, Firefox and IE11 when I uncomment the IE11 section in polyfills so I'm happy. – Post Impatica May 30 '19 at 13:24
17

I had to remove the `"module": "es2015"` line from my `tsconfig.app.json` file – ranbuch Jun 18 '19 at 08:42
8

@ranbuch, I had the same problem but did not remove the line, I just changed it to `"module": "esnext"` as well. – Alfa Bravo Jul 05 '19 at 09:54
still facing the same problem event after updating tsconfig.json file – Gaurav Aggarwal Sep 30 '19 at 11:25
did you already restart your server ? also check your tsconfig.app.json too – Tony Ngo Sep 30 '19 at 11:50
The target is still `es2015` ? – Stephane Oct 06 '19 at 09:43
You can target es2015 for modern browser – Tony Ngo Oct 06 '19 at 09:44
1

for me it was `tsconfig-aot.json`. I have changed it to `esnext` from `es2015` – Ashok M A May 31 '20 at 14:25
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: https://icetutor.com/question/angular-8-lazy-loading-modules-error-ts1323-dynamic-import-is-only-supported-when-module-flag-is-commonjs-or-esnext/ – Andy Corman Jun 18 '20 at 19:22
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. – Andrew Howard Mar 22 '22 at 16:40

score 48 · Answer 2 · edited Dec 07 '19 at 09:53

48

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.

edited Dec 07 '19 at 09:53

rlandster

7,294
14
58
96

answered Dec 07 '19 at 09:07

iconique

1,115
13
16

I dont have tsconfig.app.json file. Should I create one? – Mark Feb 03 '20 at 19:47
Yes, please refer this. https://stackoverflow.com/questions/36916989/how-can-i-generate-tsconfig-json-file – iconique Feb 04 '20 at 20:58
6

In IDEA Intelij I had the same issue. You need to reopen the project. – NieMaszNic Mar 16 '20 at 05:05
Yeah. You saved my day. – Shailesh Pratapwar Aug 20 '20 at 05:46
Thanks. I had this too. – Julio W. Aug 11 '21 at 18:21

score 37 · Answer 3 · answered May 31 '19 at 00:58

37

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.

answered May 31 '19 at 00:58

Niz

486
4
7

5

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. – RajuPedda May 31 '19 at 07:07

score 28 · Answer 4 · answered Dec 19 '19 at 01:15

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.

Yes, I had to add module: 'esnext' in both tsconfig.json and tsconfig.app.json — RDV, Mar 10 '20 at 22:06
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. — KareemJ, Sep 08 '21 at 08:41

score 3 · Answer 5 · edited Oct 31 '20 at 08:01

3

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

edited Oct 31 '20 at 08:01

Dharman

30,962
25
85
135

answered Oct 31 '20 at 07:56

piyush gautam

87
4

score 3 · Answer 6 · edited Apr 27 '21 at 08:33

3

Just update the angular version by giving below command. The errors will disappear.

ng update @angular/core @angular/cli --next

After that, change the target and module in tsconfig.json file

"target": "esnext",
"module": "esnext",

edited Apr 27 '21 at 08:33

Abhinav Kumar

2,883
1
17
30

answered Apr 27 '21 at 03:57

ganesh lankadasu

31
1

Thanks for the suggestion, Worked for me. all routes are working fine now. – Vishesh Apr 26 '23 at 21:20

Rashid Bukhari · Answer 7 · 2020-04-22T07:49:18.473

1

i resolve this error by by doing following steps step 1: "module": "es2015" to "module": "AMD" in tsconfig.json

step 2: create a new file tsconfig.app.json in app root directory, copy code of Tony Ngo and paste into, then this problem will be resolved.

edited Apr 22 '20 at 07:49

answered Apr 22 '20 at 07:40

Rashid Bukhari

21
3

score 0 · Answer 8 · answered Oct 26 '20 at 19:54

0

My angular version is 8.2 and I fixed it by just changing "module": "es2015" to "module": "es2020"

answered Oct 26 '20 at 19:54

Fouad Boukredine

1,495
14
18

score 0 · Answer 9 · answered Feb 26 '21 at 11:51

0

If you are using Ionic framework and VSCode you need to update your Typescript IDE version (> 4)!

answered Feb 26 '21 at 11:51

Nibia

314
1
7

Sameh · Answer 10 · 2022-03-01T16:36:41.453

0

I had this issue with angular 13, I noticed that some services had this issue while others didn't, the difference was

@import { Injectable } from '@angular/core/';

while this perfectly compiled without no issues on angular 9 but the fix was to remove the / at the end to become'

@import { Injectable } from '@angular/core';

edited Mar 01 '22 at 16:36

answered Mar 01 '22 at 05:00

Sameh

1,318
11
11

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

10 Answers10

Linked

Related