問題タブ [angular2-aot]

angular 2遅延ルーティングを使用しています。クライアントは、AOT と angular-router-loader を使用して子を遅延ロードする webpack2 にバンドルされています。ブラウザが接続されている場合、すべてが期待どおりに機能します。つまり、ルーターを遅延ロードされたモジュールに正常に移動でき、チャンクが正常にロードされ、コンポーネントなどを表示できます。

ただし、切断されていることをエミュレートすると (たとえば、オフライン クロム開発者ツール オプションを使用して)、関連するチャンクを読み込めないため、予想どおりルーティングが失敗します。エラーは「チャンク [チャンク番号] の読み込みに失敗しました」

その後、ルーティングコマンドが機能しなくなり、ルーターが壊れたようです。

グローバルな ErrorHandler を使用してエラーを処理しようとしました。ルーターが壊れる前にエラーをキャッチできるかもしれないという考えでしたが、それでは手遅れのようです。エラーが発生した時点で、ルーターが機能していません。

「オフライン モード」メッセージが出力されるため、カスタム エラー ハンドラが機能します。インジェクションも機能し、ルーターは null ではありませんが、ルーターのナビゲーションは機能しません。ルーターの約束は解決されず、拒否されません。

私が達成しようとしているのは、エラーを処理すること (たとえば、ユーザーに有益なメッセージを表示すること) と同時に、ルーターを動作状態にして、ユーザーが後でナビゲートできるようにすることです (インターネット接続が復元されたとき)。ページ全体をリロードせずに。

更新 1: aot と webpack なしで再現しようとしています

これが角度のあるルーターの問題であるかどうかを確認するために、jit コンパイルでオフラインで作業しようとしたときに何が起こるかを確認しようとしました。私が使用したのは、angular router plunkerがログインタブに移動し、オフラインに切り替えてログインを押したことです。クライアントが管理モジュールをロードしようとしていたため、多数の「エラー: XHR エラーの読み込み中」エラーがログに記録されました。最終的にナビゲーションは失敗しましたが、その後ルーティング ナビゲーションは壊れませんでした。他のタブに移動でき、オンラインに戻った後、管理者に移動することさえできました. おそらく問題は、angular-router-loader webpack プラグインがモジュールをロードしようとする方法です。

更新 2: 既知の問題のようです

機能: ルーター用のより堅牢なモジュール ローダー

コンパイラを使用して、ngc事前に Angular 2 アプリをコンパイルしています。アプリの一部で、デフォルトでは TypeScript でカバーされていない Notification API を使用しています。を実行するngcと、次のように不平を言います。

window.Notification オブジェクトとそのメソッド用のカスタム TS 定義ファイルがありますが、このファイルの場所を ngc コンパイラに伝えるにはどうすればよいですか?

私の tsconfig.json ファイル:

Angular2 SystemJs プロジェクト (レイジー ロード モジュールを使用) での aot の適用とバンドルに関するサンプル Angular 2 プロジェクトはどこにありますか?

これはangular-cliで行います。しかし、どうすればsystemjsでこれを行うことができますか?

angularクックブックの手順に従ってaotを生成しました。

今、私はアプリ、dist、node_modules、index-aot.html、shim.min.js、およびzone.min.jsを含むaotフォルダーを持っています

index-aot.hmtl を実行すると、以下のエラーが表示されます

セレクター「my-app」はどの要素とも一致しませんでした

私は非常に単純な Angular 2 アプリケーションを使用しており、Angular CLI を使用していません (この特定の質問のために、CLI の使用を提案しないでください)。JIT コンパイラを使用すると、サイトは問題なく実行されます。熱心にロードされたモジュールと遅延ロードされたモジュールはまったく問題ありません。

Angular 2のドキュメント で概説されているように、AOT コンパイラを正常に実行してから、Rollup を使用してツリー シェーキングを実行できます。これを行うと、熱心にロードされたモジュールに対してサイトは問題なく実行されますが、熱心にロードされたモジュールに移動しようとするとエラーが発生します。エラーメッセージは次のとおりですGET http://atticus.local/app/contacts/contacts.module.ngfactory 404 (Not Found)（これは、遅延ロードしようとしているモジュールです）

開始するための非常に基本的な質問:

• AOT とツリー シェーキングを実行しているときに遅延読み込みを使用することは理にかなっていますか? それでも恩恵を受けられますか？

上記の質問に対する答えが「はい」であると仮定すると、どうすれば AOT コンパイルと遅延読み込みを連携させることができるのでしょうか? Angular CLI の GitHub の問題で、この質問が提起されていることを確認しましたが、何らかの解決策が導入されたようです。これは、CLI を使用していることを前提としていますが、私は使用していません。*.ngfactory.tsAOT を実行したときの出力で、遅延ロードされたモジュールに対して作成されたものも作成されていないことにも気付きましたが*.ngsummary.json、積極的にロードされたモジュールに対してのみ作成されました。どちらが理にかなっていますか？

参考までに、AOT 用に実行したコマンドngc -p tsconfig-aot.jsonは次のとおりです。tsconfig-aot.json

次にrollup -c rollup-config.js、ロールアップを実行して、ツリーの揺れを実行しました。は次のrollup-config.jsとおりです。

もっと情報を提供できるか、もっと明確にできるかどうか教えてください。ありがとうございました！

プロジェクトのAngularプロジェクトにAOTを統合しようとしています。プロジェクトの実行時にエラーがスローされます。

以下のようにsystemjs.configファイルを使用しました

このタイプのエラーが発生する理由がわかりません。解決策を提案してください。

$rootScope の次の RootScopeService ラッパーを以下のように作成し、その後 xService などの名前の angular2 サービスの下でこれを使用しました。

AOT でコンパイルしましたが、問題なくコンパイルされています。その後、ロールアップでビルドファイルを作成しました。build.jsファイルを実行すると次の問題が発生します

ASP.net MVC Web API からデータをフェッチする小さな Angular 2 アプリがあります。認証の使用。Angular 2 で Ahead Of Time コンパイラを使用しようとしています。次のコマンドを実行しています

node_modules \ .bin\ngc -p src

しかし、私は次のエラーが発生しています

(ノード:13640) UnhandledPromiseRejectionWarning: 未処理のプロミス拒否 (拒否 ID: 2): TypeError: 'instanceof' の右側はオブジェクトではありません (ノード:13640) DeprecationWarning: 未処理のプロミス拒否は非推奨です。今後、処理されないプロミスの拒否は、ゼロ以外の終了コードで Node.js プロセスを終了します。

誰かがそれを解決する方法を教えてもらえますか

これは私のディレクトリ構造です

このリンクで指示されたように、tsconfig.json をルートから src フォルダーに移動しました

それが私が約束を使用している方法です

私は次のような約束を返すサービスを作成しました:

そして、このようなコンポーネントでそれを消費します

これは私の ts.config ファイルです。