각도 패키지 형식 사양에 따라 지연 모듈을 패키지하는 방법은 무엇입니까?

Question

Angular Package Format 4.0 사양에 따라 ngc 및 롤업을 사용하여 내 각 모듈을 패키징하고 있습니다.

래퍼 모듈을 사용하여 각도 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 컴파일러 오류 얻을 : 내가 아니라 그 하위 경로 중 하나 정의하면 내가하는 index.js의 게으른로드 된 모듈을 수출하려고했습니다

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) 

을, 또한 포함했다 tsconfig.json 파일 배열에 있습니다.

다른 단서가 있습니까?

이

Answer 1

지연로드 경로 귀하의 경로, 응용 프로그램 루트에서 시작과 같이 할 필요가

:

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

귀하의 실제 전체 경로이 다를 수 있습니다,하지만 CLI 응용 프로그램에서 응용 프로그램 폴더에서 시작이 중요하다 . 상대 경로는 작동하지 않습니다. 오류 정보에 따라 CLI (ng serve)는 상대 경로를 확인할 수 없습니다.

Answer 2

webpack 또는 @ angular/cli를 사용하는 경우 ng-router-loader을 사용하여 지연로드 모듈이 올바르게 묶여 있는지 확인할 수 있습니다.

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

이 하위 경로가 라이브러리에 정의되어

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

      } 
     }, 
     { 
      loader: '@ngtools/webpack', 
      options: { 
       tsConfigPath: './tsconfig.json' 
      } 
     } 
    ] 
},