Как упаковать лениво загруженный модуль, следуя спецификации Angular Package Format?

Question

Я упаковываю свой угловой модуль, используя ngc и rollup, следуя спецификации Angular Package Format 4.0.

Я могу лениво загружать его, используя угловой код, используя модуль-обертку.

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

Если вы используете 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'
            }
        }
    ]
},

Answer 2

Ваш маршрут с отложенным путем загрузки должен начинаться с корня приложения, например так:

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

Фактический полный путь может отличаться от этого, но важно начать с папки приложения в приложении CLI. Относительные пути не будут работать. Основываясь на информации об ошибке, которую вы получаете, CLI (ng serve) не может разрешить относительный путь.