我试图在我的Angular应用程序中包含外部模块(托管在git / 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
所以我决定检查qazxsw poi编译器的输出是什么(由webpack插件在引擎盖下调用):
ngc
事实上,我的模块在node_modules/.bin/ngc -p tsconfig.server.aot.json
目录中缺失。
/path/to/my/project/angular-universal-serverless/src/ngfactory/node_modules
如何强制ngc将给定的模块放在ls src/ngfactory/node_modules/
@angular @nguniversal @types idb ng-http-sw-proxy rxjs typescript-collections
输出目录中?
我的主要应用程序可以在这里找到:ngfactory
和外部模块在这里:https://github.com/maciejtreder/angular-universal-serverless/tree/externalModule
1)这里的第一个问题是AOT编译器不编译你的模块(默认排除https://github.com/maciejtreder/angular-external-module文件夹),所以你必须将它包含在ts configs的node_modules
选项中:
tsconfig.browser.json
tsconfig.server.json
tsconfig.server.aot.json
files
我们无法将其添加到"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"
]
数组中,因为typescript会将其排除
使用“include”包含的文件可以使用“exclude”属性进行过滤
在includes
中查看更多详细信息
2)然后\ node_modules \ @ angular-universal-serverless \ external-module \ release \ package.json应该有the doc字段,如:
typings
我们必须使用"name": "@angular-universal-serverless/external-module",
"main": "./src/index.js",
"typings": "./src/externalComponent/external.module.d.ts", <=== this one
,因为angular不会为external.module.d.ts
创建ngfactory
文件,而@ ngtools / webpack插件会为ContextElementDependency创建map:
index.d.ts
如果您不想更改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'
}