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

Arleanarlee

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

Lifeboat

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

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

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

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

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

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

The target is still es2015 ? – Panelist

You can target es2015 for modern browser – Lifeboat

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

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/… – Cellophane

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. – Millennium

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

Implore

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

Yes, please refer this. #36917489 – Implore

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

Yeah. You saved my day. – Separable

Thanks. I had this too. – Abolition

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

Altis

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. – Arleanarlee

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

Kishke

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

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. – Incapacity

Answer 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",

Lycian

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

Answer 6

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

Fremitus

Answer 7

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.

Kakaaba

Answer 8

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

Jessikajessup

Answer 9

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

Craw

Answer 10

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

Polytypic

Answer 11

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

Louielouis