当延迟加载路径(角8)时，我是否需要选择常春藤来使用动态导入？

Question

我最近升级到了角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'错误，我不知道如何修复这个错误。

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

对于通过路由器加载的延迟加载模块，不推荐通过字符串导入。ng更新将自动处理此问题。新语法利用了生态系统对导入的广泛支持，而不是我们的自定义重写。

ng update没有自动这样做，并在手动更改语法时抛出上述错误。

我阅读了这个新特性的一个维护人员的文章，他提到我需要选择加入常春藤。

我不确定这是一个角8错误，还是我需要选择加入常春藤(在这种情况下，文档需要更清楚)

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

你不需要艾薇来使用这个新功能。但是您必须更改您的tsconfig.json，并有以下行：

"module": "commonjs"

我以前用es2015作为值。改为commonjs解决了这个问题。

Answer 2

正如托尼在另一个问题中所说的，您需要将"module": "esnext"添加到tsconfig.json文件中。如果有不同的值，也要确保更改tsconfig.app.json中的同一行。

在此之后，我在VSCode中没有错误，但是在编译时得到了另一个错误，但我认为这是另一个问题(Module parse failed: Unexpected token)，这可能会为您解决这个问题。