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

JavascriptAngularTypescriptModuleAngular8

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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 - Javascript

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 - Javascript

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 - Javascript

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 - Javascript

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

Solution 6 - Javascript

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

Solution 7 - Javascript

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.

Solution 8 - Javascript

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

Solution 9 - Javascript

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

Solution 10 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRajuPeddaView Question on Stackoverflow
Solution 1 - JavascriptTony NgoView Answer on Stackoverflow
Solution 2 - JavascriptBi WuView Answer on Stackoverflow
Solution 3 - JavascriptNizView Answer on Stackoverflow
Solution 4 - JavascriptZach GollwitzerView Answer on Stackoverflow
Solution 5 - Javascriptpiyush gautamView Answer on Stackoverflow
Solution 6 - Javascriptganesh lankadasuView Answer on Stackoverflow
Solution 7 - JavascriptRashid BukhariView Answer on Stackoverflow
Solution 8 - JavascriptFouad BoukredineView Answer on Stackoverflow
Solution 9 - JavascriptNibiaView Answer on Stackoverflow
Solution 10 - JavascriptSamehView Answer on Stackoverflow