Question

我按照Angular Package Format 4.0规范使用ngc和汇总打包角度模块。

我可以使用包装模块使用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文件数组中。

还有其他线索吗？

Answer 1

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

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

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

Answer 2

如果您使用的是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'
            }
        }
    ]
},

如何按照Angular Package Format规范打包延迟加载的模块？

2 个答案: