CODEWITHSUNDEEP
angularangular-cliangular8
James Barrett
James Barrett

Reputation: 2806

Do I need to opt-in to Ivy to use dynamic imports when lazy loading routes (Angular 8)?

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

Upvotes: 2

Views: 2893

Answers (2)

Dunos
Dunos

Reputation: 189

Like Tony said in this other question, you need to add "module": "esnext" to the tsconfig.json file. Also make sure you change the same line in the tsconfig.app.json if you have a different value there.

After that I got no error in the VSCode, but got another error when compilating, but I think is a different issue (Module parse failed: Unexpected token) and this may solve it for you.

Upvotes: 2

Qortex
Qortex

Reputation: 7466

You don't need Ivy to use this new feature. But you have to change your tsconfig.json, and have the following line:

"module": "commonjs"

I had es2015 as the value before. Changing to commonjs solved the problem.

Upvotes: 2

Related Questions