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 · Accepted Answer · 2020-01-31 08:25:46Z

332

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, 2020 at 8:25

answered May 30, 2019 at 9:56

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Post Impatica Over a year ago

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

Post Impatica Over a year ago

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

ranbuch Over a year ago

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

Alfa Bravo Over a year ago

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

Ashok M A Over a year ago

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

|

rlandster · Accepted Answer · 2019-12-07 09:53:02Z

51

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 7, 2019 at 9:53

rlandster

7,79516 gold badges67 silver badges109 bronze badges

answered Dec 7, 2019 at 9:07

iconique

1,24515 silver badges17 bronze badges

4 Comments

Mark Over a year ago

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

iconique Over a year ago

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

NieMaszNic Over a year ago

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

Shailesh Pratapwar Over a year ago

Yeah. You saved my day.

Niz · Accepted Answer · 2019-05-31 00:58:38Z

38

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, 2019 at 0:58

Niz

5064 silver badges7 bronze badges

1 Comment

RajuPedda Over a year ago

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.

Zach Gollwitzer · Accepted Answer · 2019-12-19 01:15:24Z

28

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.

answered Dec 19, 2019 at 1:15

Zach Gollwitzer

2,4433 gold badges20 silver badges27 bronze badges

2 Comments

RDV Over a year ago

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

KareemJ Over a year ago

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.

Abhinav Kumar · Accepted Answer · 2021-04-27 08:33:38Z

5

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, 2021 at 8:33

Abhinav Kumar

3,0741 gold badge19 silver badges31 bronze badges

answered Apr 27, 2021 at 3:57

ganesh lankadasu

511 silver badge1 bronze badge

1 Comment

Vishesh Over a year ago

Thanks for the suggestion, Worked for me. all routes are working fine now.

Dharman · Accepted Answer · 2020-10-31 08:01:43Z

3

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

edited Oct 31, 2020 at 8:01

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Oct 31, 2020 at 7:56

piyush gautam

874 bronze badges

Comments

Rashid Bukhari · Accepted Answer · 2020-04-22 07:49:18Z

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, 2020 at 7:49

answered Apr 22, 2020 at 7:40

Rashid Bukhari

313 bronze badges

Comments

Fouad Boukredine · Accepted Answer · 2020-10-26 19:54:33Z

0

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

answered Oct 26, 2020 at 19:54

Fouad Boukredine

1,67516 silver badges19 bronze badges

Comments

Nibia · Accepted Answer · 2021-02-26 11:51:14Z

0

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

answered Feb 26, 2021 at 11:51

Nibia

3241 silver badge7 bronze badges

Comments

Sameh · Accepted Answer · 2022-03-01 16:36:41Z

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 1, 2022 at 16:36

answered Mar 1, 2022 at 5:00

Sameh

1,44815 silver badges14 bronze badges

Comments

jmoran · Accepted Answer · 2023-12-21 16:18:35Z

0

In my case, I had a similar issue migrating to Angular 14 from Angular 7. To fix it, I had to change all "module" and "target" properties in project to "es2020" in the next files:

tsconfig.json
tsconfig.app.json

answered Dec 21, 2023 at 16:18

jmoran

1641 silver badge5 bronze badges

Collectives™ on Stack Overflow

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

11 Answers 11

12 Comments

4 Comments

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

12 Comments

4 Comments

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related