Я недавно обновился до 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, говорится:
Для лениво загруженных модулей через маршрутизатор импорт через строку
осуждается. ng update позаботится об этом автоматически. Новый
Синтаксис использует поддержку экосистемы для импорта, а не нашего
кастом переписывает.
ng update не сделал этого автоматически и выдает вышеупомянутую ошибку при изменении синтаксиса вручную.
Я прочитал статью одного из разработчиков этой новой функции, и он упоминает, что мне нужно подписаться на Айви.
Я не уверен, является ли это ошибкой Angular 8, или мне нужно будет включить Ivy (в этом случае документы должны быть более четкими)
Мой пакет.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"
}