問題タブ [angular2-compiler]

ここからソウルションを修正してみました。正常に動作しますが、動的にロードするコンポーネントでテンプレートを templateUrl に変更すると、「ResourceLoader の実装が提供されていません。URL を読み取れません ...」というエラーが発生します。

plunker のライブ例。これを修正する方法はありますか？

そこで私は、Angular が完全な 2.0 バージョンに進むある時点で AoT コンパイルを有効にし、最終的に Angular からすべての API を取得してそれを実行する準備ができているという考えで開発されたかなり大きなプロジェクトをここに持ってきました。 ..

まず第一に、プロジェクトは Angular 2 と Typescript 2.0.2 を使用した JiT モードでは非常にうまく機能していますが、AoT ではそうではありません。

大規模な調査の結果、問題は私の宣言/プロバイダー/エントリコンポーネントのリストが動的に集約されているという事実にあることがわかりました.それは必要です。 @NgModule({ declarations:[ configuration.declarations ] }) そして、次のようなことをしようとするとすぐに: Error encountered resolving symbol values statically.

JiT モードで集計値を出力し、これらすべてのエントリの静的リストをconfiguration.declarations手動でここに挿入すると、突然機能しなくなります。

ですから、大きな疑問は - なんてこった?! なぜそれが機能しないのですか、これを克服する方法は?

すべてのサブコンポーネント要件を 1 つのファイルに手動でリストして大規模なアプリケーションを作成すると、適切なコード設計が大きく損なわれるのと同じように、適切なコーディング レイアウトを作成するのが得意であることが証明されている Angular チームが、それを唯一の代替手段として示唆するとは思わないほうがよいでしょう。

ここで説明されているのと同じ問題に基づいて、いくつかの作業を行いました。

Angular 2.0 で動的コンポーネントをコンパイルするための動的テンプレート

動的テンプレートを使用/作成して動的コンポーネントを Angular 2.0 でコンパイルするにはどうすればよいですか?

上記の質問で説明されている作業プランカーは、ここにあります。

dynamic-detail がテンプレートで dynamic-detail を使用する別の動的ビューを作成しようとすると、問題が発生します。それをやろうとすると、次の例外が発生します。

'dynamic-detail' は既知の要素ではありません: 1. 'dynamic-detail' が Angular コンポーネントの場合、それがこのモジュールの一部であることを確認します。

これは、plunker のロジックを変更して " <dynamic-detail></dynamic-detail>" を出力する動的テンプレートを作成することで、簡単に再現できます。

ファイル「app/dynamic/template.builder.ts」で、次のコードを変更しました。

に

それが起こると、上記の例外に遭遇します。どうやらコンパイラは、動的詳細が再帰的に行われる場合に慣れていないようです。

DynamicDetail をさまざまなモジュールのインポートに追加しようとしましたが、うまくいきませんでした。多分それは解決策の一部ではありません。

Windows 10 UWP を対象とする Ionic 2 アプリケーションの構築。コード全体で、次のように winrt API に直接アクセスします。

var localStorage = Windows.Storage.ApplicationData.current.localStorage;

tsc でのコンパイルは機能しますが、ngc でアプリケーションをコンパイルすると、エラーがスローされますCannot find namespace 'Windows'

明らかに、Angular AOT は winrt Api について何も知りません。それは UWP のコンテキスト内で実行されていないためですが、それが Typescript 定義ファイルの目的だと思いました。

しかし、どうすればこの問題を回避できますか? おそらく Typescript 定義ファイルを含めることでこれを解決できると思いましたが、Typescript は正常にコンパイルされます。

これが私のプロジェクトのtypings.jsonファイルです

次の typescript および angular コンパイラ構成を使用します。

tsconfig.json

/compiled ディレクトリには /node_modules/@angular のみが含まれ、必要な ngfactory ファイルを含む /app ディレクトリはありません。コンパイルは、エラーも出力もなく、サイレントに終了します。

Typescript 2.0 で問題なく動作しますが、es5 をターゲットにしている間は async/await サポートに 2.1 を使用したいので、babel で余分なコンパイル手順を省略できます。

[編集]

これは、 Typescript 2.1.0-dev.20160907 以降、正確に async/await サポートが実装されたときにのみ発生します。壊れたのは、そのバージョンの変更の 1 つだと思いngcます。2.1.0-dev.20160906 は引き続き機能しました。

[編集2]

誰かngcが typescript 2.1 を使ってみた場合、それがうまくいくかどうか短いコメントを残していただけますか? 問題が私の設定にあるかどうかは、少なくともわかります。

このangular 2 プロジェクトでAOTコンパイラを使用しようとしています。コマンドを実行すると、エラー: is not a function : が表示されます。この問題を解決するには？TypeError: this.compiler.compileModules"node_modules/.bin/ngc" -p tsconfig-aot.json

再現する手順：

1. このリポジトリのクローンを作成します: https://github.com/AngularClass/angular2-webpack-starter

2. コンパイラー cli をインストールします (バージョン 2.1.2): npm install @angular/compiler-cli --save

3. src/app/+detailディレクトリとdetailルーターを削除します（エラーが出力src/app/app.routes.tsされるため、実行しました：）"node_modules/.bin/ngc" -p tsconfig-aot.jsoncan't resolve module src/app/+detail/index.ts from src/app/+detail/index.ts

4. 作成tsconfig-aot.json:

   { "compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments" ": false, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true },
   "angularCompilerOptions": { "genDir": "aot", "skipMetadataEmit": true } }

5. 走る"node_modules/.bin/ngc" -p tsconfig-aot.json

次のようにAppComponentangular-cliを含むプロジェクトを作成しました。

そしてapp.component.htmlとして

したがって、ビルドすると、次のようなコードを含むこの./dist/main.bundle.jsng buildのようなファイルが生成されます-

つまり、ビルド時にコンパイラ/bundle-er は html ファイルを読み取り、それらを生成された js ファイルに連結します。

しかし、私の場合、html も動的で、サーバー側からのコンテンツ駆動型です。たとえば、html の代わりに、私のテンプレート ファイルはapp.component.jspであり、まったく別のサーバーまたはフォルダーに存在するとします。

また、その JSP ファイルが返されることもあれば、現在のサーバー時間に応じて返さ<h1>Good Morning, {{title}}</h1> れることもあります。<h1>Good Afternoon, {{title}}</h1>

この機能を実現するにはどうすればよいですか?

私が理解しているのは、ある種のローダー関数を定義する必要があるということです:loadDynamicTemplate(template_url)

Component デコレータ テンプレート プロパティでそのローダー関数を使用する必要があります。その場合、main.bundle.JS が生成されると、その関数も使用されます。そのため、実行時に angular はこの関数を呼び出し、ajax によって HTML をロードして使用します。

更新 1

ここで SystemJS と Webpack の違いを見つけました。また、SystemJS を使用できれば、実行時に HTML ファイルをロードできることもわかりました。したがって、この問題は SystemJS の構成で解決できると思います。しかし、そのためには別の問題が発生しますが、それは別の問題になる可能性があると思います. そこで、ここで整理するために新しい質問を投稿しました。

おそらくその質問が解決されたら、SystemJS を試して、解決策が役立つ場合はここに投稿します。

以下の例に従います。

動的テンプレートを使用/作成して動的コンポーネントを Angular 2.0 でコンパイルするにはどうすればよいですか?

変数から直接 HTML コンテンツを取得する独自のテンプレート ジェネレーターを開発しました。ここにあります: http://plnkr.co/edit/2Sv1vp?p=preview

さて、私の質問は...テンプレートのコンテンツがコンポーネントと対話する必要がある場合、たとえばクリック時に実行する関数と対話する必要がある場合...どうすればそれを行うことができますか?

ここに私の app.component.ts

「Sono il secondo template」をクリックしようとすると、printSomething()関数が実行されるはずですが、代わりに次のエラーが発生します。