我是否需要选择加入 Ivy 以在延迟加载路由时使用动态导入 (Angular 8)？

Question

我最近升级到 Angular 8，想使用新的动态导入功能。

我想转换为：

 { path: 'payments', loadChildren: './components/payments/payments.module#PaymentsModule' }

为此：

 { path: 'payments', loadChildren: () => import('./components/payments/payments.module').then(m => m.PaymentsModule)}

但是我的代码编辑器 (VSCode) 抛出 Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext' 错误，我不确定如何修复。

在 Angular 更新指南 (https://update.angular.io/) 中，当谈到使用新的 import 语法时，它说：

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 没有自动执行此操作，并在手动更改语法时抛出上述错误。

我阅读了此新功能的一位维护者的 article，他提到我需要选择加入 Ivy。

我不确定这是否是一个 Angular 8 错误，或者我是否需要选择加入 Ivy（在这种情况下，文档需要更清楚）

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

Answer 1

您不需要 Ivy 即可使用此新功能。但是你必须改变你的tsconfig.json，并有以下行：

"module": "commonjs"

我之前的值是es2015。更改为 commonjs 解决了问题。

Answer 2

与Tony said in 一样，您需要将"module": "esnext"添加到tsconfig.json文件中。如果那里有不同的值，还要确保更改 tsconfig.app.json 中的同一行。

在那之后我在 VSCode 中没有错误，但在编译时又出现了另一个错误，但我认为这是一个不同的问题 (Module parse failed: Unexpected token)，这可能会为你解决。

我是否需要选择加入 Ivy 以在延迟加载路由时使用动态导入 (Angular 8)？

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

angular-cli

angular

angular8