AOT编译器 - 包括延迟加载外部模块

Question

我想包括外部模块（混帐/ NPM库主办）在我的角度应用延迟加载模块。

我编译我的外部模块与NGC编译：

node_modules/.bin/ngc -p tsconfig-aot.json

这是我的编译器配置的样子：

{ 
    "extends": "./tsconfig.json", 
    "compilerOptions": { 
    "baseUrl": "src", 
    "declaration": true, 
    "outDir": "./release/src" 
    }, 
    "files": [ 
    "./src/index.ts" 
    ], 
    "angularCompilerOptions": { 
    "genDir": "release", 
    "skipTemplateCodegen": true, 
    "entryModule": "index#ExternalModule", 
    "skipMetadataEmit": false, 
    "strictMetadataEmit": true 
    } 
} 

在我主要的应用程序我懒加载特定的模块：

RouterModule.forRoot([ 
     { path: '', component: HomeComponent, pathMatch: 'full'}, 
     { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'}, 
     { path: 'external', loadChildren: '@angular-universal-serverless/external-module/release#ExternalModule'} 
]) 

出于编译目的，我使用@ ngtools/webpack插件。

的JIT编译工作没有任何问题，但AOT编译给我的错误：

ERROR in ./src/ngfactory lazy 
Module not found: Error: Can't resolve '/path/to/my/project/angular-universal-serverless/src/ngfactory/node_modules/@angular-universal-serverless/external-module/release/src/index.js' in '/Users/mtreder/Documents/private/work/angular-universal-serverless/src/ngfactory' 
@ ./src/ngfactory lazy 
@ ./~/@angular/core/@angular/core.es5.js 
@ ./src/main.server.aot.ts 

所以我决定检查什么是ngc编译器的输出（whic通过的WebPack插件引擎盖下的称呼） ：

node_modules/.bin/ngc -p tsconfig.server.aot.json

而事实上，我的模块在/path/to/my/project/angular-universal-serverless/src/ngfactory/node_modules目录丢失。

ls src/ngfactory/node_modules/ 
@angular  @nguniversal  @types   idb   ng-http-sw-proxy rxjs   typescript-collections 

我怎么能强迫NGC的地方给予模块在ngfactory输出目录？

我主要的应用程序可以在这里找到：https://github.com/maciejtreder/angular-universal-serverless/tree/externalModule

与外部模块的位置：https://github.com/maciejtreder/angular-external-module

Answer 1

1）这里的第一个问题是，AOT编译器不会编译模块（node_modules文件夹排除通过默认情况下），所以你必须把它列入files选择您的TS CONFIGS的：

tsconfig.browser.json

tsconfig.server.json

tsconfig.server.aot.json

"files": [ 
    "./node_modules/@angular-universal-serverless/external-module/release/src/externalComponent/external.module.d.ts" 
], 
"include": [ 
    "./src/main.browser.ts", 
    "./src/app/lazy/lazy.module.ts", 
    "./src/app/httpProxy/http-proxy.module.ts" 
] 

我们不能将它添加到includes阵列，因为打字稿将其排除

Files included using "include" can be filtered using the "exclude" property

见the doc

详情

2）然后 \ node_modules \ @角万向无服务器\外部模块\释放\包。JSON应该有typings领域，如：

"name": "@angular-universal-serverless/external-module", 
"main": "./src/index.js", 
"typings": "./src/externalComponent/external.module.d.ts", <=== this one 

我们必须使用external.module.d.ts因为角度不为index.d.ts创建ngfactory文件，而@ ngtools /插件的WebPack创建ContextElementDependency地图：

const factoryPath = lazyRoute.replace(/(\.d)?\.ts$/, '.ngfactory.ts'); 
// where lazyRoute === .../external-module/release/src/externalComponent/external.module.d.ts 
const lr = path.relative(this.basePath, factoryPath); 
this._lazyRoutes[k + '.ngfactory'] = path.join(this.genDir, lr); 

如果您不想更改package.json然后更改loadChildren字段：

{ 
    path: 'external', 
    loadChildren: '@angular-universal-serverless/external-module/release/src/externalComponent/external.module#ExternalModule' 
}