1

我正在使用 ngc 打包我的 Angular 模块，并按照 Angular Package Format 4.0 规范进行汇总。

我可以使用包装器模块使用 angular cli 延迟加载它。

import { LibraryModule } from 'my-library';
import { NgModule } from '@angular/core';
@NgModule({
    imports: [LibraryModule],
    exports: [LibraryModule]
})
export class WrapperModule { }

...

RouterModule.forRoot([
  {
    path: 'todolist',
    loadChildren: './wrapper.module#WrapperModule'
  }],

库模块还包含子路由。如果我将这些子路线之一定义为：

{
  path: 'foo',
  loadChildren: '../foo/foo.module#FooModule'
}

我收到一个 cli 编译器错误：

ERROR in Error: Could not resolve module ../foo/foo.module relative to C:/Workspace/test-app/node_modules/my-library/my-library.d.ts
    at StaticSymbolResolver.getSymbolByModule (C:\Workspace\test-app\node_modules\@angular\compiler\bundles\compiler.umd.js:31826:30)
    at StaticReflector.resolveExternalReference (C:\Workspace\test-app\node_modules\@angular\compiler\bundles\compiler.umd.js:30292:62)
    at parseLazyRoute (C:\Workspace\test-app\node_modules\@angular\compiler\bundles\compiler.umd.js:28577:55)
    at listLazyRoutes (C:\Workspace\test-app\node_modules\@angular\compiler\bundles\compiler.umd.js:28539:36)
    at visitLazyRoute (C:\Workspace\test-app\node_modules\@angular\compiler\bundles\compiler.umd.js:29937:47)
    at visitLazyRoute (C:\Workspace\test-app\node_modules\@angular\compiler\bundles\compiler.umd.js:29941:17)
    at AotCompiler.listLazyRoutes (C:\Workspace\test-app\node_modules\@angular\compiler\bundles\compiler.umd.js:29905:20)
    at AngularCompilerProgram.listLazyRoutes (C:\Workspace\test-app\node_modules\@angular\compiler-cli\src\transformers\program.js:157:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Workspace\test-app\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Workspace\test-app\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:246:66)
    at Promise.resolve.then.then (C:\Workspace\test-app\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:542:50)
    at process._tickCallback (internal/process/next_tick.js:109:7)

我尝试在 index.js 中导出延迟加载的模块，我还将它包含在 tsconfig.json 文件数组中。

还有其他线索吗？

4

2 回答 2

0

您的带有延迟加载路径的路由需要从应用程序根目录开始，如下所示：

{
  path: 'foo',
  loadChildren: 'app/foo/foo.module#FooModule'
}

您的实际完整路径可能与此不同，但从 CLI 应用程序中的 app 文件夹开始很重要。相对路径将不起作用。根据您收到的错误信息，CLI ( ng serve) 无法解析相对路径。

于 2017-12-14T00:20:43.400 回答
0

如果你使用 webpack 或 @angular/cli，你可以使用ng-router-loader来确保延迟加载的模块被正确捆绑。

npm install ng-router-loader --save-dev;

webpack.config.js

{
    test: /\.ts$/,
    use: [
        {
            loader: 'ng-router-loader',
            options: {

            }
        },
        {
            loader: '@ngtools/webpack', 
            options: {
                tsConfigPath: './tsconfig.json'
            }
        }
    ]
},
于 2017-12-14T00:32:10.437 回答