Angular 8 - Lazy loading modules : Error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'
JavascriptAngularTypescriptModuleAngular8Javascript 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';