AOTコンパイラ - 遅延ロードされた外部モジュールを含む

Question

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 

だから私は（WebPACKのプラグインにより、ボンネットの下に呼び出されwhic）ngcコンパイラから出力されたかどうか確認することにしました：

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 

どのように私はngfactory出力ディレクトリに指定したモジュールを配置するNGC強制することができますか？

私の主なアプリケーションは、ここで見つけることができます：https://github.com/maciejtreder/angular-universal-serverless/tree/externalModuleここ

と外部モジュール：https://github.com/maciejtreder/angular-external-module

Answer 1

1）ここでの最初の問題は、AOTコンパイラが（node_modulesフォルダがで除外された自分のモジュールをコンパイルしていないということですデフォルト）、あなたは、TSのコンフィグのfilesオプションでそれを含める必要がありそう：

tsconfig.browser.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" 
] 

tsconfig.server.aot.json

tsconfig.server.json

typescriptですが、それを

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

を除外しますので、私たちはincludes配列に追加することはできません

詳細を参照してくださいthe doc

2）次に、 \ node_modules \ @ angular-universal-serverless \ external-module \ release \ packageを入力します。JSONべきでありtypingsフィールドのように：あなたの場合は

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); 

：私たちは、角度がindex.d.tsためngfactoryファイルを作成していないため、@ ngtools/WebPACKのプラグインがContextElementDependencyためのマップを作成しながら、external.module.d.tsを使用する必要が

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

package.jsonを変更しない場合は、loadChildrenフィールドを変更してください。

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