I've recently upgraded to Angular 8 and want to make use of the new dynamic imports feature.
I want to convert this:
{ path: 'payments', loadChildren: './components/payments/payments.module#PaymentsModule' }
To this:
{ path: 'payments', loadChildren: () => import('./components/payments/payments.module').then(m => m.PaymentsModule)}
However my code editor (VSCode) throws a Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext' error, which I'm unsure how to fix.
On the Angular update guide (https://update.angular.io/), when talking about using the new import syntax, it says:
For lazy loaded modules via the router, importing via string is deprecated. ng update will take care of this automatically. The new syntax leverages the ecosystem wide support for import rather than our custom rewrites.
ng update did not do this automatically and throws the aforementioned error when manually changing the syntax.
I read an article by one of the maintainers of this new feature and he mentions that I will need to opt-in to Ivy.
I'm not sure if this is an Angular 8 bug, or if I will need to opt-in to Ivy (in which case, the docs need to be clearer)
My package.json:
"dependencies": {
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/common": "^8.0.0",
"@angular/compiler": "^8.0.0",
"@angular/core": "^8.0.0",
"@angular/flex-layout": "^8.0.0-beta.26",
"@angular/forms": "^8.0.0",
"@angular/http": "^7.1.1",
"@angular/material": "^8.0.0",
"@angular/material-moment-adapter": "^8.0.0",
"@angular/platform-browser": "^8.0.0",
"@angular/platform-browser-dynamic": "^8.0.0",
"@angular/pwa": "^0.800.0",
"@angular/router": "^8.0.0",
"@angular/service-worker": "^8.0.0",
"basic-keyboard-event-polyfill": "^1.0.1",
"classlist.js": "^1.1.20150312",
"concurrently": "^4.1.0",
"core-js": "^3.1.3",
"hammerjs": "^2.0.8",
"moment": "^2.22.2",
"ng-click-outside": "^4.0.0",
"ng2-pdf-viewer": "^5.2.1",
"ngx-device-detector": "^1.3.3",
"ngx-logger": "^3.3.11",
"phantomjs": "^2.1.7",
"rxjs": "^6.2.1",
"web-animations-js": "^2.3.1",
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.800.0",
"@angular-devkit/build-ng-packagr": "~0.800.0",
"@angular-devkit/build-optimizer": "^0.800.0",
"@angular/cli": "^8.0.0",
"@angular/compiler-cli": "^8.0.0",
"@angular/language-service": "^8.0.0",
"@compodoc/compodoc": "^1.1.3",
"@types/jasmine": "~3.3.13",
"@types/jasminewd2": "~2.0.3",
"@types/karma-viewport": "^0.4.0",
"@types/node": "12.0.3",
"codelyzer": "~5.0.1",
"gulp": "^4.0.2",
"gulp-sass": "^4.0.1",
"gzipper": "^2.5.1",
"http-server": "^0.11.1",
"jasmine-core": "^3.3.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^4.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.4",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"karma-junit-reporter": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-viewport": "^1.0.4",
"ng-packagr": "^5.2.0",
"node-sass": "^4.12.0",
"protractor": "~5.4.2",
"rimraf": "^2.6.2",
"ts-node": "~8.2.0",
"tsickle": "^0.35.0",
"tslib": "^1.9.3",
"tslint": "~5.16.0",
"typescript": "3.4.5",
"webpack-bundle-analyzer": "^3.3.2"
}