懒加载路由资源的懒命名空间对象

Question

我将使用 Angular 编译器： const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin; 使用以下编译器选项：

"angularCompilerOptions": {
"genDir": "./build/compiled",
"outDir": "./build/compiled",
"skipMetadataEmit": true,
"debug": true},

我的 package.json 文件中相关部分如下:

"@ngtools/webpack": "^6.0.0",
"@angular/router": "^5.2.0",
"webpack": "4.8.3",
"webpack-cli": "2.1.4",

我的angularCompilerPlugin配置如下：

new AngularCompilerPlugin({
  tsConfigPath: 'path-to-tsconfig.webpack.json',
  entryModule: 'path-to-app.module#AppModule',
  sourceMap: true
}),

在这些配置下，我得到了:

ERROR in ./$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve 'path-/alerts/module.ngfactory.js' in 'path-to-app-folder/$$_lazy_route_resource'
 @ ./$$_lazy_route_resource lazy namespace object
 @ ./node_modules/@angular/core/esm5/core.js
 @ multi core-js/shim classlist.js reflect-metadata zone.js/dist/zone jquery/dist/jquery rxjs/Rx lodash jquery.panzoom moment moment-timezone @angular/common @angular/core @angular/http @angular/router @angular/forms semantic

请给予任何指导或帮助。

- Usman Aziz

---

请将您的tsconfig.json文件添加到您的问题中。 - Brian Ogden

Answer 1

我通过在ts.config-aot.json的files部分中添加懒加载模块的.ts路径，成功解决了这个错误：

{
    "compilerOptions": {
        "target": "es5", //most browsers currently understand this version of Javascript
        "experimentalDecorators": true, //Angular2 uses Component,Injectable etc
        "emitDecoratorMetadata": true, //Required for Angular2 to use the metadata in our components
        "types": [
            "node",
            "jasmine"
        ],
        "lib": [
            "es2015",
            "es2015.iterable",
            "dom"
        ]
    },
    "exclude": [
        "node_modules"
    ],
    "files": [
        "src/app/app.module.ts",
        "src/main.ts",
        "src/app.d.ts",
        "src/app/sandbox/sandbox.module.ts",
        "src/app/supplier-xchange/supplier-xchange.module.ts",
        "src/app/company-profile/company-profile.module.ts",
        "src/app/bom/bom.module.ts",
        "src/app/custom-price-column/custom-price-column.module.ts",
        "src/app/neca/neca.module.ts"
    ]
}

- Brian Ogden

---

我一直遇到相同的错误，通过在文件中添加模块，帮我解决了这个问题。只想了解如何摆脱手动配置? 最近我转到了另一个项目，其他所有项目都会自动从路由配置中选取这个，我是否需要做什么来实现这一点？ - Vivek Kumar