8

Lazy ロード モジュールで既に動作していたアプリを AOT に変換しようとしています。@ngtools/webpack ツールキットを使用して AOT コードをコンパイルしていますが、Angular が Lazy ロードされたモジュールのコードを見つけられないというエラーが発生しています。

ERROR in ./src/ngfactory async
Module not found: Error: Can't resolve '/Library/WebServer/Documents/envato-teams/src/ngfactory/src/app/components/container/projects.ngfactory.ts' in '/Library/WebServer/Documents/envato-teams/src/ngfactory'
@ ./src/ngfactory async
@ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
@ ./src/ngfactory/src/app/app.module.ngfactory.ts
@ ./src/main.aot.ts
@ multi main

私のアプリのルート定義で言及する価値があるこのプロジェクトのモジュールは遅延ロードされます:

{
  path: 'projects', loadChildren: './components/container/projects#ProjectModule'
},

これは私のセットアップがどのように見えるかです：

tsconfig :

...
"angularCompilerOptions": {
  "genDir": "./src/ngfactory",
  "entryModule": "src/app/app.module#AppModule"
}
...

ウェブパック:

new ngtools.AotPlugin({
    tsConfigPath: './tsconfig.aot.json',
}),

Main.aot.ts

/*
* Providers provided by Angular
*/
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './ngfactory/src/app/app.module.ngfactory';

import { Servicesconfig } from './app/services/index';

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

webpack では、次のようにして @ngtools/Webpack で ts ファイルをコンパイルしています。

// Support for .ts files.
{
  test: /\.ts$/,
  loaders: ['@ngtools/webpack'],
  exclude: [/\.(spec|e2e)\.ts$/]
},

ご協力ありがとうございました！

4

1 に答える 1

8

私は AOT と Lazy ロード モジュールに苦労していました。

どちらかを選択することは、製品ビルドのオプションではありませんでした。

これらの機能が本当に一緒に必要だったのに、それらを手に入れることができず、あきらめなければなりませんでした。今日まで ！

angular-cli2 日前にリリースされました: AOT と遅延読み込みをサポートする1.0.0-beta.21 !

angular-cli プロジェクトで: 

npm cache clean  
npm install --save-dev angular-cli@latest  
ng init

楽しみ ！

PS : ここで素晴らしい仕事をしてくれた angular-cli チームに感謝します ... !

編集:
私はいくつかのベンチマークを行いました:

+-----------------------+-------------+--------------+-----------+-------------+
|                       | Main bundle |   Chunk 0    | Scripting | First paint |
+-----------------------+-------------+--------------+-----------+-------------+
| ng serve              | 4.5 MB      | Not splitted | 6075 ms   | 5500+ ms    |
| ng serve --prod       | 334 KB      | Not splitted | 5587 ms   | 4750+ ms    |
| ng serve --aot        | 3.3 MB      | 326 KB       | 4011 ms   | 4400+ ms    |
| ng serve --prod --aot | 243 KB      | 18.1 Kb      | 3860 ms   | 4250+ ms    |
+-----------------------+-------------+--------------+-----------+-------------+

（私はたくさんのものを開いていて、3台のモニターとラップトップが痛いので、結果はあまり良くありません^__^）。

そのことから私たちが覚えていることは次のとおりです:
---prod --aotビルドのサイズはビルドよりも27% 小さいです -ビルドは--prodビルドよりもスクリプティング時に31% 高速 です - AOT はクールです! -何かを見落としていない限り、期待していた遅延ロードされたチャンクを見つけることができず、遅延ロードされたと思われるコードをメインバンドルに見つけたので 、おそらくフラグのないバグがあります。Githubでイシューをオープンしました。
--prod --aot--prod

aot

于 2016-11-24T13:56:41.863 に答える