Question

我没有在我的AOT版本中使用Angular CLI，并且正在使用Angular 4.x. 我创建了一个模块，我打算将其作为一个延迟加载的模块加载。这是文件项目的部分结构：

- app
  |----lazyLoadedModuleFolder
  |           |
  |            --- componentsFolder
  |            --- lazyload.module.ts
  |
  |-----main.aot.ts

在我的main.aot.ts文件中，用于我的AOT构建，我有：

import { MyAppLicationModuleNgFactory } from './../aot/src/MyApplicationModule.module.ngfactory';

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';


if (webpack.ENV === 'production') {
  enableProdMode();
}

platformBrowser().bootstrapModuleFactory( MyAppLicationModuleNgFactory);

在我的路由配置中，我对延迟加载的模块有以下内容：

const appRoutes: Routes = [
...

  { path: 'myapp/lazyLoadView', loadChildren: './app/lazyLoadedModuleFolder/lazyload.module'}

];

在我的lazyload.module.ts文件中，我导出了以下类：

export default class lazyLoadModule {

}

当我运行JIT构建时，一切正常，但是，当我运行AOT构建时，我收到以下错误：

无法解决＆＃39;。\ app \ lazyLoadedModuleFolder \ lazyload.module＆＃39;

如果我不使用延迟加载（将模块转换为急切加载的模块），一切正常。

这是我用于aot版本的tsconfig.aot.json：

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noEmit": true,
        "module": "es2015",
        "sourceMap": true,
        "target": "es5",
        "types": ["es6-shim", "jasmine"],
        "noImplicitAny": true,
        "allowJs": true,
        "removeComments": false,
        "suppressImplicitAnyIndexErrors": true,
        "moduleResolution": "node",
        "lib": ["es2015", "es2015.iterable", "dom"],
        "skipLibCheck": true

    },

    "files": [
        "src/main.ts",
        "src/main.aot.ts",
        "src/app/lazyLoadedModuleFolder/lazyload.module.ts",
        "src/typings.d.ts"
    ],

    "angularCompilerOptions": {
        "genDir": "aot",
        "skipMetadataEmit": true
    }

}

另外，我在我的webpack.config文件中使用以下加载器进行AOT构建：

{ loader: 'angular2-template-loader' }

所以我想知道为什么我的AOT构建在我使用延迟加载时不起作用，但是当我没有将模块用作延迟加载模块时，工作正常。

提前感谢您的帮助。

Answer 1

除了提前编译之外，AOT还会检查您的文件是否有错误，看起来您需要将路径更改为：

{ path: 'myapp/lazyLoadView', loadChildren: './app/lazyLoadedModuleFolder/lazyload.module#LazyLoadModule'}

因为您需要在文件名+'＃'之后指定模块名称。

无法在Angular AOT构建中解析延迟加载的模块

1 个答案: