Angular: コンポーネントのテンプレートを動的にロードする

2つのコンポーネントを用意してから、必要な状況に対応するコンポーネントをロードしてみませんか。 例： AdminDisplayComponentおよびNotAdminDisplayComponent ？
テンプレートを動的にすることはできません。テンプレートはコンポーネントに関連付ける必要があります

テンプレートは現在動的ではないことを私は知っています、そしてそれは私が概説したように苦痛です。 同じロジックで2つ、それ以上、または数百のコンポーネントを実装したくありません。
だから私はこの機能をリクエストします！

@KarlXOL不可能とは、AOTを壊さずに動的にすることは不可能だということです。
問題の解決策として、共通のコードを共有したい場合は、サービスを使用してみませんか？ または、サービスがコンポーネントを作成するとは思わない場合は、コンポーネントから継承します

@DzmitryShylovich ：この機能を提供したくないことはわかっています。 しかし、私がこれを行うための他のすべての方法を説明しようとしたので、松葉杖であり、実用的ではありません。
角度機能を使用してこれを行う場合、AOT機能も壊すコンパイラも使用する必要があります。 右？ だから何。
独断的にならないで、あなたのアプローチを考え直してください。 私/私たちはソリューションを提供しており、これを行う上で私たちをサポートするプラットフォームが必要です。

@Toxicable ：CRUD機能などをサービスにカプセル化する方法の例がある場合は、ぜひご覧ください。 これが可能であるとしても、例えば製品ごとにコンポーネントを実装する必要があります。

@KarlXOLCRUD機能をサービスとして実装できなかった理由がわかりません。 おそらくそれはそれを行うための最良の方法であり、一般的なパターンです。

あなたがAOTをまったく気にせず、実行時にコンパイラモジュールがロードされた状態でJITモードですべてを実行したいことを正しく理解している場合。 その後、あなたは今それを行うことができます。 https://www.ag-grid.com/ag-grid-angular-aot-dynamic-components、https://eyalvardi.wordpress.com/2016/09/04/injecting-components-inでeaxmpleを探してください-ランタイムまたはhttp://blog.assaf.co/angular-2-harmony-aot-compilation-with-lazy-jit-2。

@ mlc-mlapis：もちろん、実際のデータ操作（新規、更新など）はサービス内にあります。 ただし、コンポーネントの一部であるユーザーの操作（クリック、...）によってトリガーされます。

あなたが参照しているリンクは、複数のコンポーネントをどのように扱うかを示しています。 そしてそれがポイントです。私は赤、緑、青の複数のコンポーネントを持ちたくありません。 必要なコンポーネントは1つだけで、テンプレート/レイアウトを変更します。 機能リクエストで理由を説明しました

@KarlXOLしかし、この例はまさにあなたが望むものです、はいまたはいいえ（あなたの視点を理解するために）？ https://eyalvardi.wordpress.com/2016/09/04/injecting-components-in-runtime

そうです、クリックはありますが、コンポーネントがDI（シングルトンである必要があります）を介してサービスを注入し、必要なインターフェイスを提供するため、なぜそれらに言及するのか理解できません。

もちろん、実際のデータ操作（新規、更新など）はサービス内にあります。 ただし、コンポーネントの一部であるユーザーの操作（クリック、...）によってトリガーされます。

@ mlc-mlapisこれは、リクエストで参照する可能なソリューションの1つです（「dynamiccomponentloader」）。 このアプローチの欠点は
1）動的コンテンツを持つコンポーネントごとにさらに多くのコード行が必要です
2）動的モジュールの作成は、それを機能させるために適応（インポート）する必要があります（ディレクティブ）
結果として、大きなオーバーヘッドのある動的モジュールがあるか、複数の動的モジュールビルダーを実装します

要約すると、このソリューションは、Angularが進化するにつれて、idを適応させる必要がある、重量があり、非常に低レベルで、リスクが高いものです...そして、Angular1がこの要件に提供する無駄のない迅速なアプローチとは競合しません。
簡単な例を示すために、異なる部門に属するユーザーに異なる「タイトル」を提示したいとします。

そのため、テンプレートをその場で変更/ロードする機能をリクエストします。 フレームワークは、ビジネスアプリケーションではなく、この低レベルのものを処理する必要があります。

これで、あなたが何を意味するのかが明確になりました。 そのような単純化と非常に高いレベルの機能性を想像することができます。 また、これはJITモードのみに厳密に制限されることも言う必要があります。

実際、AngularにはJITモードとAOTモードの間で機能を区別するattributeはありません。 stable 、 experimental 、 depreciatedます。

もう1つの質問は、タイムラインにおけるそのような機能の優先順位とAngularコアチームの観点です。

@ mlc-mlapisフィードバックをありがとうございます。 メッセージを伝えることができてうれしいです:-)

ここにある他の多くの問題、stackoverflowから、この機能は実際のビジネスアプリケーションで非常に一般的な要件であるため、大きなニーズがあることを知っています。 過去そして将来さらにもっと。

@DzmitryShylovich ng-descendantの提案からはわかりませんが、それが私の要求の解決策になるでしょう。

大規模なエンタープライズアプリケーションのシナリオでより柔軟で使いやすくするために、角度のあるアーキテクチャアプローチを再考することをお勧めします。 Angularフレームワークとチームがコンポーネントのテンプレートを動的にロードすることは不可能な使命ではありません。

@KarlXOL Enterpriseアプリケーションのシナリオが、AOTが存在する理由です。 😄動的テンプレートは単なるショートカットであり、 cheaperソリューションです。 したがって、おそらく非現実的な再考についての推奨事項です。

@ mlc-mlapis私はこのような答えを期待していました。 なぜAngularチームが企業に必要なものを提供していないのか疑問に思っています。 また、エンタープライズ環境では、アプリケーションをより高速かつ安価にすることが重要です。 しかし、これはAngular2でサポートしているものではないことを確認しました。

@KarlXOL好奇心から、Googleがグローバルアプリケーションを開発する方法について何か情報はありますか？

@ mlc-mlapisわからない。 Angular1またはAngular2ですか？

@KarlXOL企業が必要としているのはこれだけではないので、やりたいことだからといって、誰もが必要としているわけではありません。 彼らが最近行ったすべてのことは、アプリケーションをより速く、より簡単に作成できるようにすることです。v2-> v4からのバンドルの削減を見てください。
目標をどのように達成しようとしているのかを再考することをお勧めします。AngularJSで機能する方法が、Angularで機能する場合に常に最良のアプローチであるとは限りません。

cc @robwormald

@KarlXOLいいえ、私はインターネット上のmade-in Googleの大部分を意味しました。 見てください： https ：

@KarlXOLは、私が作成した小さな例ですhttps://plnkr.co/edit/kz2XKSKWSWZhPoncDQhG?p=preview
これで行うのは、UI /構成を提供してから、メソッドにフックしてバックエンドをヒットすることだけです。

@Toxicableあなたのプラン

@Toxicableその通りです。 私の投稿はサービスに関して不正確でした。

@KarlXOLその時あなたが望むものが得られません。 テンプレートをその場で交換できることが、このような一般的な設定を使用するよりも優れているとは思えません。 これにより、わずか20LOCのコンポーネントを定義するだけで済みます。

@ mlc-mlapisWeb開発のレッスンをありがとうございます。 あなたが言ったように、それはグーグルがどのようにウェブフレームワークを開発するかについてです。 私の要求は、企業にビジネスソリューションを提供する方法と、そのためのツールとフレームワークをどのように利用するかという観点からのものであることを認めなければなりません。 あなたが述べたようにフレームワークを開発することに加えて、他のいくつかの要件とニーズが生じます。 このような要件についても評価していただければ幸いです。 最後に、私たち全員がお互いからより多くの利益を得るでしょう、そして角度2はより強力なフレームワークである可能性があります。

@Toxicableサンプルは、テンプレートをオンザフライで交換することではなく、データアクセスサービスを提供することを目的としています。テンプレートを交換するための他のすべての実装（実際にはサポートされていません）は、動的なモジュール/コンポーネントの作成によって実行されます。レベル角度の実装。

@KarlXOLはい、わかっています。私のサンプルは、テンプレートを交換することではありませんでした。 あなたが言った：

CRUD機能などをサービスにカプセル化する方法の例があれば、ぜひご覧ください。 これが可能であるとしても、例えば製品ごとにコンポーネントを実装する必要があります。

これが私がしたことです。 私はあなたがそれを解決したい方法ではなく、あなたの問題に対する解決策を提供しましたが、それでもそれは解決策です。 しかし、私の主張は変わりません。 どういうわけか可能であれば、テンプレートを入れ替えて何が得られるのかわかりません。どちらの場合も、テンプレートコードを作成する必要があるので、非常に大量の作業で何が得られるのでしょうか。フレームワークにこのようなものを実装することにさらに近づくには時間がかかりますか？

@ToxicableExact 。 あなたはポイントを得ました。 テンプレートコードを書くだけです。 他のすべてのコードは変更されません!! 上からのサービスを含む、マスターデータ管理の一般的な実装を想像してみてください。 テンプレートを変更するだけで、別のテーブル（ビジネスオブジェクト）が実装されます。 少なくともこれはAngular1で可能です。

@KarlXOLそして、そのプリンシペを広い範囲で適用する場合、これは実際には問題です。 多くのコードが実行時にコンパイルされるため、適切なテストを行うことができないため、実行時にのみ多くの隠れたエラーを見つけることができます。 そして、これは受け入れられません。 あなたはその概念を小さな規模でしか遊ぶことができません、そしてそれでもあなたは多くの予測不可能性を危険にさらすでしょう。

テンプレートを変更するだけで、別のテーブル（ビジネスオブジェクト）が実装されます。

@ mlc-mlapis確かに、あなたは正しいです。 しかし、結果として、角度2からコンパイラーを削除する必要があります。これは、原則として、私がやりたいことをすでに達成できるためです。 複雑すぎます。

私はあなたの議論を強調しすぎますが、それはあなたがアプリケーションで処理しているすべての種類のデータ（データベースなど）も含みます。 すべてをテストすることはできず、アプリケーションマネージャーの責任に常に何かが残されます。
私たちの議論に戻ると、必要なのは、私の意見では、実用主義と建築ビジョンの適切な組み合わせです。 ビジョンが与えられている、それは確かです。 そして、いくつかの実用主義も角度2の勝利になる可能性があります。私の要件はエキゾチックではなく、そこにいる多くの人々に必要とされています。

@KarlXOL私はあなたの議論のいくつかに同意することができます。 しかし、反対側には、より良いアプリが得られるという理由だけで、アプリケーションの概念を再考する必要がある場所もあります。

この観点からAngularコアチームの立場が重要であるため、おそらく議論は終わりです。 なぜAOTが今好まれているのか、いくつかの背景的な議論を表現したかっただけです。

KarlXOLのオプションに同意します。 私の会社の要件では、動的構成が必要なUIが非常に多くあります。 それはangular1でうまく機能しました。angular1をangular2に移行すると、ひどくなります。 最後に、DynamicComponentLoaderを見つけ、それを使用して問題を解決しました。 しかし、最近多くの顧客から苦情が寄せられているため、パフォーマンスは受け入れられません。

社内で話し合いました。 私の会社の開発者のほとんどは、Angular2が多くの静的（制御可能な）ことを行ったと考えています。 開発者は、動的テンプレート、動的変更言語などの動的なものを扱うことが制限されていました。個人的には、柔軟性が失われると思います。 また、Angular 2は、これらの種類の動的機能をより簡単に提供することを強くお勧めします。

異なるコンポーネントではなく、異なるテンプレートが必要なのはなぜですか？ おそらく、Angularでコンポーネントを継承することが可能であることを見逃していますか？ たとえば、 https： //medium.com/@amcdnl/inheritance-in-angular2-components-206a167fc259を参照して

あなたの推薦をありがとう。 しかし、解決策は私が望むものではありません。 私のシナリオは、ビューテンプレートがデザイナーまたは非開発者によって動的に構成され、データベースに保存されたというものです。 ロジックはほとんどの状況で修正されています。 レイアウトの再設計またはフィールドの追加/マイナスが必要な要件のみ。
これは、CRM / ERPドメインで非常に一般的な動作です。 odooのように、フィールドをドラッグアンドドロップして、さまざまな業界のさまざまなフォームを生成します。

わかった。 次に、あなたがしなければならない唯一の問題は、あなたが説明したようにユーザー定義のテンプレートを新しいコンポーネントにコンパイルすることです...もちろんサーバー上で...それはその新しいコンポーネントを含む新しいモジュールを作成します...フラグを保存します...この詳細はその新しいコンポーネントによってレンダリングされる必要があります...そしてオンデマンドで新しいモジュールを適切なタイミングでロードするといういくつかの構成。

@ mlc-mlapis
この機能のリクエストとスレッドを注意深く読むと、提案しているソリューションよりも優れたソリューションがあり、このソリューションアプローチに伴う苦痛や混乱を回避できることがわかります。
@ robert-luoqingは、非常に一般的なシナリオとこの機能の必要性について非常によく説明しました。

@KarlXOL私は知っています。 私が理解していない唯一の瞬間は、カスタムテンプレートの唯一のJiT動的コンパイルが今日すでに利用可能であり、それは常にここにあったということです...しかし、上記の定式化は、この機能が欠落していることを示しています。

その場合、AoTを使用できないことは明らかであり、おそらく使用できない理由を理解しているでしょう。

したがって、テーブルにあるのは、JiTモードで動的テンプレートのコンパイルを行うためのsome more user friendly Angular APIsだけです。 AoTモードとの互換性がなくても。

@ mlc-mlapis
ビジネスニーズをサポートするために、実用的で保守可能なソリューションを提供する必要があります。 Angular 2は、非常に洗練されたソフトウェアテクノロジーを提供することにより、これの基盤を築くフレームワークです。 だから私は（まだ）それを使っています。
一方、Angularには、非常に一般的な要件をサポートするための「使いやすさ」が欠けています。 たとえば、ここで説明しているものとして。 エラーメッセージ（開発およびランタイム）、UIフレームワークなどにも改善の余地があります。

ソリューションを提供できることは、あなたがいつも考えていることよりも私にとって重要です：AoT、静的型チェック、ツリーの揺れ、.... !!! （たとえば、JITは通常十分に高速です）
もちろんこれは重要だと思いますが、「普通の」開発者が必要としていることを忘れているような印象を受けることもあります。

OK、それなら私たちはお互いを理解しています。 他の事柄は、何百もの可能性のあるケースがあるので、異なるタイプのプロジェクトにとって何が重要で何が重要でないかについての優先順位と一般的な意見です。

この機能は素晴らしいでしょう。 私が取り組んでいるERPプロジェクトにも同様の要件がありますが、残念ながら、それが原因で、Angularを好きなだけ使用できません。

私もこの機能を支持します。
データベースからページを提供するエンタープライズコンテンツ管理システムがあります。 エンドユーザーは、HTMLテキストエディタを使用してHTMLファイルを変更でき、n個のタスクを実行できます。
Angularを使用してクライアントアプリケーションを再開発したいのですが、この機能が原因で停止しています。

@ asadmalik3ダイナミックHTMLをうまく使用できますが、ダイナミックテンプレートを簡単に使用することはできません。 テンプレートはHTMLではなく単なるJSコードであり、AOTで実行するには、コンパイルする必要があることを思い出してください。
したがって、CMS型システムの場合、ユーザーが新しいAngularコンポーネント、パイプ、ディレクティブ、またはサービスを追加せずにHTMLを編集できるようにすると、100％問題なく実行できます。 実行時に既存のコンポーネントを使用して、アプリケーションでコンパイルされた作業コンポーネントに置き換えることもできます。 そして、この例はangular.ioです。https ： //github.com/angular/angular/blob/master/aio/src/app/layout/doc-viewer/doc-viewer.component.tsを参照して
AngularではAngularJSから状況が改善され、AOTのようなアプリケーションははるかに高速になり、ユーザーエクスペリエンスが向上しますが、状況によっては、まったく同じように機能することを期待するのではなく、別の観点から問題について考える必要があります。以前と同じように。

@Toxicableコンポーネントをその場で作成することのパフォーマンスへの影響は何ですか？ コンポーネントをその場で作成するサンプルを開発し、本番環境で使用する前にそのパフォーマンスを評価したいと考えています。

最初に考慮すべきことは依存関係です。 異なる依存関係を持つコンポーネントをその場で作成すると、問題が発生する可能性があります。
次に、ブラウザーでAngularコードをコンパイルすると、ユーザープロセッサーを100％使用します。
第三に、遅くて大きなJITコンパイラに永遠に飽きてしまいます
これは、アプリケーションをJITモードで実行することで確認できます。

@Toxicableオンザフライで作成されたコンポーネントに依存関係を渡すにはどうすればよいのでしょうか。
それを作成するコンポーネントの責任ですか？ それのまともな例を見せてくれませんか？

同じニーズがあります。 単に、お客様がデータの視覚的表示を任意の方法で整理できるようにします。 同じ角度のコンポーネントを使用します。クライアントごとにHTMLを再編成する必要があります。 10〜20の役割を持つ数百のクライアントがあり、各役割は一意のレイアウト、同じANGULARコンポーネントを持つことができます。 しかし、一般的なAngularコンポーネントを使用する数百の固有のHTMLテンプレートがあります。 これは珍しいことではありません。 Angularを使用してフォームを動的に作成することを検討しましたが、それは機能する可能性がありますが、HTMLテンプレートをキャッシュして準備する方がはるかに高速です。 HTMLだけでなく、動的に派生する必要のあるコンポーネントに動的に作成することも検討しますが、それが実行されることを期待しているわけではありません。 したがって、HTMLテンプレートに同じ正確なAngularアーティファクト（依存関係、コンポーネントなど）が含まれている場合は、テンプレートを交換して新しいレイアウトを取得できるはずです。

@ asadmalik3親Injectorをその場で作成されたコンポーネントに渡して、既存のサービスを使用できるようにします。 新しいサービスが必要な場合は、モジュールにロードする必要があります

@glwbkfsすでに述べたことを正確に行うことができ、angular.ioはまさにそれを行います。 それらは、実行時にそれらのコンポーネントのhtmlが既存の実行中のコンポーネントと交換される各コンテンツページで異なる方法で編成された同じAngularコンポーネントを使用します。
例はここで見ることができますhttps://github.com/angular/angular/blob/master/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
このライブラリでも同じことができると思いますhttps://github.com/laco0416/ng-dynamic
基本的に、動的に作成されるものを望まない限り、Angularが提供できるものの領域に完全にいます。

@Toxicable事前にレンダリングされたhtmlがサーバーから返されるというdoc-viewerコンポーネントに表示されるもの。 事前にレンダリングされたhtmlをサーバーに保持したくないので、htmlテンプレートを取得して、コンポーネントでレンダリングします。 どうすればこれを達成できますか？

@ asadmalik3事前にレンダリングされたhtmlの意味がわかりませんか？
入力ドキュメントは、どのhtmlページにもある通常のhtmlです。
これがどのように機能するか誤解するかもしれないので、私はそれがどのように適用されることができるかについての小さなデモをここで作りました
https://plnkr.co/edit/B5aIMZ7rYCLn1WizqUnW?p=preview

サーバーから返されたHTMLに{{title}}のようなものがある場合、angularはあなたの手法を使用してそれを解決しません。

@ asadmalik3いいえ、そうは言わなかった。
{{title}}ようなことをするためには、テンプレートをコンパイルする必要があると私は言いました

基本的に、動的に作成されるものを望まない限り、Angularが提供できるものの領域に完全にいます。

つまり、機能しないものをコンパイルする場合は、既存のコンポーネントでのみ機能します。

サーバーから静的HTMLを提供する必要があるのに、なぜ角度を選択するのですか？ 私の謙虚な意見では、このドキュメントビューアの例は役に立たないので、他の人と共有するべきではありません。 どのエンタープライズビジネスアプリケーションでも、サーバー上にプリレンダリングテンプレート（html）を「これまで」持っている人は誰もいません。 同様のページは、常にクライアントごとに異なるデータでレンダリングされます。

今後は、サーバーからテンプレートを取得して実行時にコンパイルするための「簡単」で「許容できる」方法を提供する必要があると強く感じています。 アプリケーションを100％超高速にしたくありません。90％のパフォーマンスで満足しますが、柔軟性が得られるはずです。

@Toxicableこのプランhttps://embed.plnkr.co/jkWaZnfaH8bD7787BM5W/
製品のリストとクライアントのリストがあります。 製品のリストが一番上に表示され、続いてクライアントのリストが表示されます。

私のクライアントの1人が順序を変更したいのですが、クライアントは最初にクライアントのリストを表示し、次に製品のリストを表示したいと考えています。 その場合、私は喜んでクライアントにWebエディターなどを使用してhtmlを変更するように依頼します。

しかし、今、上で説明したように順序を変更する必要がある場合、これを実現するために新しいコンポーネントを作成する必要があるようです。

したがって、最初に製品を表示し、次にクライアントを表示する1つのコンポーネントと、最初にクライアントを表示し、次に製品を表示する2番目のコンポーネントがあります。

@ asadmalik3それが動的である必要がある理由はまったくわかりません。 クライアントにHTMLの編集を依頼しますか？
順序を変更するだけですか？ どうして？
順序を変更してDBに保存するUI要素（選択ボックスなど）を作成し、再度開いたときに、この順序の選択を読み込んで完了します。

これは、データの順序を変更することではなく、クライアントに提供する柔軟性に関するものです。 クライアントにページのhtmlの編集を許可したときに発生する可能性について考えてみてください。 あなたは彼らにほとんど何でもできるようにしています。 クライアントの1人が「クライアント」セクションの上に画像広告を配置したい場合はどうなりますか？ もう1つは、製品セクションの前にいくつかの重要な情報や指示を表示したいですか？ それはすべてそこにあり、彼らは彼らがやりたいことを何でもすることができます。

さらに、すべてのクライアントがテーマをパーソナライズして必要に応じてデータを表示したい、ボックスレイアウトを望んでいるクライアント、表形式でデータを表示したいクライアント、すべてのクライアントと一緒に画像を表示したいクライアントがあります製品など。私たちは座ってこれらすべての変更を行うことはありません。柔軟性を提供し、クライアントはこれらすべての変更を自分で行うことができます。 ここで重要なのは柔軟性です。

この記事のような意味ですか？
https://medium.com/@DenysVuika/dynamic -content-in-angular-2-3c85023d9c36

記事を読みました。 「ランタイムコンパイル」は私が必要なものです。 しかし、KarlXOLが言ったように、ソリューションは複雑すぎて重すぎます（コンパイルされたモジュールは他の3番目に必要なモジュールなどを参照する必要があります）。 また、テストしたところ、AOTではうまく機能しませんでした。 「私は個人的に、コンポーネントのテンプレートを何らかの方法で動的に設定できるが、AOTの動作を壊さない、まっすぐでシンプルなソリューションが必要です」。 これが私が欲しいものです。

ところで、「動的コンテンツ」は、モジュールにすでに存在するコンテンツコンポーネントだけではなく、アプリはユーザーの選択によって参照して表示するだけだと思います。 ただし、コンテンツコンポーネントも実行時まで不明です。 ユーザー入力またはリモート構成によって生成されます。

+1

コンポーネントデコレータでテンプレートとしてpromiseまたはobservableを提供できると便利です。 次に、バックエンドによってテンプレートを提供することができます。

やあ、

現在、実行時にカスタムコンポーネントをコンパイルする方法も探しています。 私たちのユースケースは、Angular4フォームを使用して編集された多くのデータを含むHTMLメールをプレビューすることです。

現在、完全なWebページを含む口ひげテンプレートを使用してから、すべての変数を置き換え、コンテンツをiframeに配置し、iframeのディメンションを更新します。

これは問題なく機能しますが、iframeのコンテンツ全体が何度も置き換えられるため、ちらつきが発生します。

HTMLテンプレートは、既存の選択（サードパーティによって提供される）からユーザーによって選択されるか、ユーザーによって直接編集されるため、AOTを使用してそれらをコンパイルすることはできません。

私は他のソリューションにも興味があり、現在、Angularをほとんどバイパスし、 {{var_name}}を<span id="var_name"></span>に置き換えてから、純粋なjsを使用してものを置き換えるという考えをいじっています。

一方、これにより、Angularが解決するように設計されたものを実装する必要があります。そのため、AOTの機能が失われることを意味する場合でも、それを実行するオプションがあると便利です。

AOTを使用してアプリをコーディングし、@ angular / dynamic-templatesを追加して、必要な機能を追加し、アプリの残りの部分をAOTバージョンとして機能させるために、これは別のプロジェクトである必要があります。 （最初は、よりユーザーフレンドリーになるようにJITを再パッケージ化するだけでしたが、さらに努力すれば、まったく別のものに進化する可能性があります）

どう思いますか？

やあ。 ユースケースは多少異なりますが、機能リクエストはこの問題の重複であるとアドバイスされました。

私の会社には、消費者が国の公的登録簿から入手できる不動産データを検索できるアプリケーションがあります。 ユーザーがプロパティを選択すると、利用可能なデータを含むレポートが表示されます。 このレポートはサードパーティによって生成され、純粋なhtml（単なる大きなテーブル）です。 レポートの一部の要素には、ユーザーが購入できる他の情報への「プロトリンク」が含まれています。 これらの「プロトリンク」は明確にマークされており、簡単に選択でき、属性としてリンクを生成するために必要なすべての情報が含まれています（基本的にさまざまなドキュメントへの一意の識別子）。 私たちのアプリケーションは現在2つの言語をサポートしているため、JiTコンパイルには永遠に時間がかかります。

私の現在の解決策は、サニタイズされたhtmlをコンポーネントのinnerHtmlにバインドすることです。 AfterViewInitフェーズ中に、コンポーネントはこのhtmlをトラバースし、protolinksをanchor-elementsに置き換えます。 物事はうまく機能していると思います（少しハッキーですが、私はそれでかなり大丈夫です）。 ただし、routerLinksを使用できれば、気分が良くなります（これらのことについては、少し自閉症になる可能性があります）。
ナビゲーションのみsinglePageアプリ内で発生し、ちょうど私の悲しいパンダなるためのページリフレッシュを持ちます。

理想的には、信頼できるhtmlを少しコンパイルできるコンポーネントとディレクティブ（routerlinkなど）のホワイトリストをなんとかして宣言する方法があると思います。 これは、AoTコンパイルを介して実行できる必要があります。 これは、we_advise_you_not_to_do_this_in_production-kindaの方法で可能になるはずですが、まだ方法が見つかりません。

これは私のアプリケーションatmにとって重要ではなく（おそらく違いを登録するのは私だけです）、angular-2が変わった素晴らしいフレームワークにとても満足しています:-)。

@eliasre ...そして、純粋なHTMLも何らかの方法で解析される実際のhttp://angular.ioサイトと同じ原則を使用しようとしています。 プロセス中に、既知のコンポーネントのディクショナリがルックアップされ、それらの場所でAngularネイティブコンポーネントが動的にインスタンス化されます。 だからあなたはそれらのどれでも使うことができます...それらのすべての内部機能などで...

@ mlc-私が探しているものとまったく同じように見えるmlapis！ 私はこれがスタックオーバーフローではないことを知っていますが、これを使用する方法に関するいくつかのドキュメントの方向を教えていただけますか？

Angular2について毎日新しいことを学んでいるような気がします。 通常、私が学んだことは、ヒーローツアーガイドの最初の50ページに文書化されているようですが：P

@eliasreこれがデモですhttps://stackblitz.com/edit/angular-dynamic-content-viewer?file=app%2Fdynamic-content-viewer.ts

@Toxicableうわー、かっこいいです

<component1 smth="smth">
  <component2>item 1</component2>
  <component2>item 2</component2>
  <component3 smth="smth">
    <component4>smth</component4>
  </component3>
</component1>

そして現在、実行時にこれをコンパイルするためにJiT（ほとんどのコードでaotを使用）を使用することを余儀なくされています

@artaommahe ... component1直接使用することはできません...しかし、^^^のようなテンプレートでラッパーを使用する場合...しかし、私はまだ試したことがありません。

しかし、次のようなテンプレートでラッパーを使用する場合

このマックアップはバックエンドから来るまで不明で、何百ものバリエーションがあります

@artaommahe ...ああ、なるほど。 しかし、それでも解析と動的コンポーネントのインスタンス化を使用すると、ケースを管理することも可能です^^^ ...別の方法で間接的なコンテンツプロジェクションを作成するだけです...独自のコードを介して...

@ Toxicable 、 @ artaommahe ：「... stackblitz ...」デモに関連しています。 これは古いものであり、実際のビジネスアプリケーションには使用できません。 通常のhtmlだけを挿入するにはコードとオーバーヘッドが多すぎます。 動的コンポーネントローダーソリューションについても同じです。 さらに、データバインディングなしでHTMLを挿入することは、私たちが日常生活で扱っているユースケースではありません。

現在のところ：コンポーネントのレイアウト（HTML）を角度2〜4でオンザフライでロードするためのソリューションはありません。

@KarlXOL申し訳ありませんが、そのデモがどのように機能するかについていくつか誤解している必要があります。

これは古いものです

何が古いものを悪くするのですか？

通常のHTMLだけを挿入するにはコードとオーバーヘッドが多すぎます

一度だけ実装してから、通常どおりHTMLだけを実装します。オーバーヘッドがないため、それが何を意味するのかわかりません。 あなたのためにそれを行うnpmパッケージもあります

実際のビジネスアプリケーション

よくangular.ioはそれを使用しているので、どこからその情報を入手したのかわかりません。

データバインディングなしでHTMLを挿入する

データバインディングはこれで機能します

現在のところ：コンポーネントのレイアウト（HTML）を角度2〜4でオンザフライでロードするためのソリューションはありません。

はいあります

@Toxicable ：いいえ、データバインディングでは機能しません。 テンプレートの{{myvar}}でデモを更新し、それがどのように機能するかを見せてください。 前もって感謝します

@KarlXOLは、HTMLに直接補間することはできません。これは、デモのポイントではないhtmlをコンパイルしないと機能しません。コンポーネントにデータバインドできます。 重要なのは、コンポーネントを再利用することで、動的なレイアウトを作成し、コンポーネントを好きなように再利用できることを示すことです。再コンパイルする必要はありません。
あなたが求めているのは、動的にコンパイルされたテンプレートであり、このコンテキストでは意味がありません

@Toxicableなので、現在、JiTを使用して実行時にコンテンツプロジェクションを使用してマークアップをコンパイルする以外に、私の場合は方法がありませんか？ （プリコンパイルするためにいつでも変更できる何百ものランダムなmakrupを作成する方法がわかりません）

@Toxicableデモを編集して、その値をtestnameという名前の変数にバインドするテキストフィールドを含め、 my-componentコンポーネントでtestname値を使用できるようにしてください。 nameパラメーター値としてのtestnameテキストフィールドの値が更新されるたびにパラメーターを更新する必要があります。

私は何十もの異なるアプローチを試しましたが、それを機能させることができません。 HTMLで{{myvar}}を直接取得できない場合は、 <display-value [value]="bind_to_var_name_x_or_y" />というコンポーネントが必要です。 これは可能ですか？

@swftvsn ...コンポーネントの新しいインスタンスを作成すると、その参照を取得します...たとえば_cmpRef 。 次に、 _cmpRef.instanceを介して、そのコンポーネントの@Input()と@Outputにアクセスできます...（ @Input() myprop: string;と@Output() messages: EventEmitter<string> = new EventEmitter<string>(); ）：

this._cmpRef.instance.myprop = 'xxx';

また

this._cmpRef.instance.messages.subscribe(this.messageSubscription);
...
messageSubscription = (_message: string) => {
     ...
}

HTMLオブジェクトの動的ロードはAngular2の基本的な機能であるはずですが、残念ながら、パフォーマンスの名目で、それは利用できません。 将来、この機能は来るかどうか？

@Toxicableデモをありがとう、HTMLオブジェクトへの動的イベントバインディングが機能していません（例：KeyPress、入力オブジェクトへのngOnChanges）

入力してくれた@ mlc-mlapisに感謝します！

私は今、1日の可能性を探求しました。私がする必要があることは、おそらく動的コンポーネントを使用して実行できます。

うさぎの穴を追いかけているときに私が考えた2つのこと：

1. 公式ドキュメントはもう少し良いかもしれません、私はそれが他のAngularドキュメントほど良くなく詳細ではないと感じています
2. ほとんどのユースケースは現在のAPIを使用して実行できますが、私はそれがはるかに簡単で直感的である可能性があると再び感じています

コミュニティはこの素晴らしいフレームワークを使用することによって台無しにされているので、私たちはすべてが簡単で素敵であると期待する傾向があります;）

@swftvsn ...トピックhttps://angular.io/guide/dynamic-component-loaderに関する公式ドキュメントがあり

ただし、1つの質問です。口ひげのテンプレートをライブにする必要があり、次のようなものを取得しているようです。

<table>
  {{#each rows}}
    <tr>
      <td>{{someprop}}</td>
    </tr>
  {{/#each}}
</table>

ものやループをネストする場合でも、動的コンポーネントの部分はすでに解決しましたが、{{}}のものをコンポーネントで置き換えているため、これを解決するための適切なアプローチを見つけることができないようですが、コンポーネントは、実際にテーブルを混乱させるため、それ自体の痕跡を残してはなりません。 replace = trueが機能しなくなったので、これに少し困惑しています。 ディレクティブは、添付するものがないため、機能しません。

何か案は？

@ mlc-mlapis私は実際、公式ドキュメントは単純なケースに対応していると思いますが、難しい部分は未回答のままです。 mustachioテンプレートまたは他のサードパーティが生成したhtmlをダイジェストし、その一部をライブのAngularコンポーネントに置き換えるようなものです。

スピードが一番で、残りはそれに続くこと、そしてAngularのAOTの性質が多くのことを難しくしていることを私は理解しています。 私に言わせれば良い選択ですが、完璧な世界では、開発者が適切と考える場所でJITをAOTと（簡単に）並べることができます。

@swftvsn ...これらの場合、 attribute componentは、 <tr mycolumns></tr>ように非常に適しています。ここで、 mycolumnsは、テンプレート（列用）または同じパターンを適用する通常のコンポーネントです。 <td mycolumn></td> ...ただし、動的コンポーネントでは、テーブル構造内で許可されていないトレース...ネストされた要素を常に作成するため、これも使用できない概念です。

私はわからないが、私は唯一のチャンスは、同じように、任意のサブコンポーネントを含むことができ、動的コンポーネントとして、テーブル全体をラップすると思い<tr mycolumns></tr>使用して繰り返し*ngFor ...

ここでも動的テンプレートが必要です。 私のアプリケーションは数日に1回起動するので、起動パフォーマンスはまったく気にしません。

動的テンプレートは、アプリケーションアーキテクチャに拡張性レイヤーを追加します。

基本的には、このような拡張性により、失われた柔軟性を取り戻すことができるという考え方です。 SPA以前の時代には、（Web開発者のように）バックエンド技術を使用して、すべての依存性注入と動的クラス読み込み/動的アセンブリ読み込みを使用して、アプリケーションを「すべてがプラグイン」の概念で編成していました。 フロントエンドはその一部にすぎず、注文を処理するコードの一部を動的にロードすると、コードのその部分はその機能のためのWebフロントエンドも提供します。

SPAを使用すると、デスクトップのようなパフォーマンスと感触が得られましたが、その柔軟性は失われました。

動的テンプレートを使用することは、そのような機能にとって最も重要です。 ブラウザプラットフォームには、これに必要なすべての柔軟性と、AOT（重要ですが他の人にとっては重要です）のような非常に残念な機能があり、角度が不自由になる可能性があります。

Angularは数週間以内にAngularElementsをリリースする予定であり、この問題が解決されることを願っています。 Angular Elemetnsについては、以下のリンクを確認してください。

https://docs.google.com/presentation/d/1jiXHYwfe1iSUiVLdKLFhSPRHLI_FmIvrI60QTpP6KLk/edit#slide = id.g26d86d3325_0_0

Angularは数週間以内にAngularElementsをリリースする予定であり、この問題が解決されることを願っています。 Angular Elemetnsについては、以下のリンクを確認してください。

しかし、これはランダムなテンプレートのアセンブル/コンパイルには何もありません。動的UIがあり、バックエンドからのランダムなマークアップからこのUIをアセンブルする必要がある場合、これはどのようにそのケースを解決しますか？ 事前にコンパイルしたり、コンポーネントとして作成したりすることはできず、頻繁に変更されます

この機能は2018年のロードマップにあります。TwitterでBradGreen（@bradlygreen）から返信がありました。 :)

@nsksaisaravanaツイートへのリンクを共有できますか？

@ asadmalik3以下のスクリーンショットを確認するか、 https： //twitter.com/bradlygreenを参照して、StackOverflowがAngularの人気ツイートコメントの劇的な増加を報告していることを確認してください。

@nsksaisaravana @ asadmalik3この機能（コンポーネントのテンプレートを動的にロードする）は2018年のロードマップにありますか？ これが言及されている2018年のロードマップへのリンクはありますか？

@sunilpes ...しかし、現在利用可能です... Angularコンパイラーを使用するだけでよいので、AOTモード（通常は

これを読んでください： //github.com/angular/angular/issues/20875

@ mlc-mlapis＃20875の問題を経験しました。 compilerモジュールを使用してオンザフライ（ランタイム）でモジュールをロードしてみましたが、メソッドcompileModuleAndAllComponentsSyncが機能します。 しかし、ここでの私の質問は次のとおりです。
compilerモジュールはAngular（低レベルAPI）の内部にあります。 今後のメジャーバージョンでも期待どおりに機能しますか？
このモジュール（コンパイラ）に基づいてツールを構築し、動的モジュールをオンザフライでロードしようとしています。

@sunilpes ...しかし、現在利用可能です... Angularコンパイラーを使用するだけでよいので、AOTモード（通常は

このため使用できませんhttps://github.com/angular/angular/issues/19902大きなテンプレートでは非常に遅い

@sunilpes ...うーん、それが問題です。 実際、バージョン6では5と同じように使用できると思います。途中で新しいビューエンジンがあります....コードネームivy ...これは本当に興味深い新しい可能性を開きます...しかしそれはバージョン7についてです...これまでのところ、具体的なことは何も言えません。 😄

AngularIvyレンダラーのプレビュー-Angularの新しいビューエンジン!!!

https://github.com/robwormald/ivy-code-size

この機能がいつ利用可能になるかについての更新はありますか？

@scottseeker ...現在の可能性が十分でない場合は、アイビーを待つ必要があります。

@ mlc-mlapisこの機能を待っています。 この機能は、ランタイムプラガブルモジュールを開発する大きな可能性を秘めています。 それがどうなるか見てみましょう...

@sunilpes ...

https://is-angular-ivy-ready.firebaseapp.com/#/status
また ...

• https://blog.angularindepth.com/ivy-engine-in-angular-first-in-depth-look-at-compilation-runtime-and-change-detection-876751edd9fd
• https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c

@KarlXOLこれでも意味がある場合は、templateUrl = yourNewHTML ...を使用してv2Componentを作成し、v1Componentを拡張します。

@KarlXOLこれでも意味がある場合は、templateUrl = yourNewHTML ...を使用してv2Componentを作成し、v1Componentを拡張します。

マークアップがバックエンド（さまざまな演習を含むレッスンコンテンツなど）からのものであり、個別の管理ダッシュボードを介して変更される場合が多くあります。

私もこの機能が大好きです。
実行時にコンポーネント「angular-html」を変更できるようにするため。

@mastronardif +1

カスタムフォームを表示するためにサーバーから提供されたアービトレーションテンプレートをレンダリングする必要があるタスクがありました。 テンプレートでバインディングを有効にするには、実行時にコンポーネントを作成してコンパイルする必要がありました。

それを達成するためのステップ：

• ViewContainerRef内で動的にコンパイルされた子コンポーネントを作成およびレンダリングする親コンポーネントを作成します。
• コンパイラトークンを使用してコンパイラを挿入します。
• ComponentデコレータとNgModuleデコレータ（内部の関数）を使用して、コンポーネントとそれを宣言するモジュールを定義します。
• 両方をコンパイルします。 これにより、コンポーネントインスタンスの作成に使用できるコンポーネントファクトリが提供されます。
• コンポーネントファクトリを使用して、ビューコンテナ内にコンポーネントを作成します。
• オプション：コンポーネント入力がある場合は、それに値を割り当てます。

import {AfterViewInit, Compiler, CompilerFactory, Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
import {CommonModule} from '@angular/common';
import {JitCompilerFactory} from '@angular/platform-browser-dynamic';

@Component({
    selector: 'app-parent',
    template: '<div #container></div>'
})
class ParentComponent implements AfterViewInit {
    @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
    constructor(private compiler: Compiler) {}

    ngAfterViewInit() {
        // Must clear cache.
        this.compiler.clearCache();

        // Define the component using Component decorator.
        const component = Component({
            template: '<div>This is the dynamic template</div>',
            styles: [':host {color: red}']
        })(class {});

        // Define the module using NgModule decorator.
        const module = NgModule({
            declarations: [component]
        })(class {});

        // Asynchronously (recommended) compile the module and the component.
        this.compiler.compileModuleAndAllComponentsAsync(module)
            .then(factories => {
                // Get the component factory.
                const componentFactory = factories.componentFactories[0];
                // Create the component and add to the view.
                const componentRef = this.container.createComponent(componentFactory);
            });
    }
}

覚えておくべきいくつかの事柄：

• コンパイラでclearCacheを呼び出すことを忘れないでください。 そうしないと、コンポーネントを1回しかレンダリングできなくなります。 2回目にコンパイルしようとすると、Angularは2つの異なるモジュールに存在する同じコンポーネントについて文句を言います。
• コンポーネントとモジュールの宣言で匿名クラスを使用する必要はありません。 私は実際に、アプリケーションにすでにあるクラスを使用してコンポーネントを宣言しました。
• アプリがAOTコンパイラでコンパイルされている場合、コンパイラは通常使用できません。 これを解決するには、コンパイラを明示的に提供する必要があります。

export function createCompiler(compilerFactory: CompilerFactory) {
    return compilerFactory.createCompiler();
}

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [],
    providers: [
        // Compiler is not included in AOT-compiled bundle.
        // Must explicitly provide compiler to be able to compile templates at runtime.
        {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
        {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
        {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}    ],
    declarations: []
})
export class CoreModule {}

@ alert9k ...コアアプリと組み合わせるこの方法は開いていて機能します... Ivyでどのような動的なものが開かれるかを確認します...優れたパフォーマンスでも。

@ alert9k私は非常によく似た要件を持っており、昨年同じアプローチを試しましたが、機能させることができませんでした。 私が見逃していたのは、モジュールの変更だったと思います。 だから私はそれを本当に素早く試しています、そしてあなたのコードスニペットから私が理解できない唯一のことはこの「createQuestionFunction」関数がどこから来ているかです：

const componentFactory = this.createQuestionContent(factories.componentFactories[0]);

@BKHines気づいてくれてありがとう。 それをアプリから無謀にコピーして貼り付けました。 修理済み。

@ alert9kははは、それは私が一時的に設定したものです。 私はそれを実行しませんでした。 実行しただけで動作するのを見ていただろう！ 素晴らしいスタッフマン！ ありがとう！

@ alarm9kそれは本当に面白いです。 ありがとうございました！ コンパイラをバンドルからツリーシェイクしないことのコストに関する統計はありますか？

差は329kBです。

差は329kBです。

あなたはgzipを逃した

@ alarm9kこのように作成されたコンポーネントにサービスを注入することは可能ですか？ コンポーネントコンストラクターにChangeDetectorRefとElementRefを挿入しようとすると、 Can't resolve all parameters for ComponentClass: (?, ?).おかげで

良い一日！ また、外部データソースから現在のコンポーネントのテンプレートを置き換える必要性に直面しました。 もちろん、現在、コンポーネントを動的に作成し、現在のロジックをコンポーネントに転送することで、この問題を解決しようとしています。 しかし、パターンを正確に変更できるのは素晴らしいことです。 私はこの機能を本当に楽しみにしています。 この機能の出現のタイミングのおおよその評価をお願いします。 NS。

@ alert9k ng build --prodを除いて、これは非常にうまく機能します。 エラーはありませんが、Webサイトをロードすると、コンソールに次のように表示されます。

エラーエラー：「ランタイムコンパイラがロードされていません」
Ni /main.f449713c3fb3867ad6bf.js:1:68849
compileModuleAndAllComponentsAsync /main.f449713c3fb3867ad6bf.js:1:69182
ngAfterViewInit / 6.c40d8b2dc5100b1af302.js
Xs /main.f449713c3fb3867ad6bf.js:1:126416
Qs /main.f449713c3fb3867ad6bf.js:1:126176
Zs

@SamuelMarksこれは、モジュールでコンパイラーを提供していないことが原因である可能性があります。

どこに含める必要がありますか？

親@NgModuleのimports: []を意味しますか？ -どのモジュールですか？

@SamuelMarksこのコードをモジュールに含めましたか？ 数か月前にこれを機能させることができなかったときに同様のエラーが発生し、 @ alarm9kの例まで、コンパイラが実行時にないことがわかりました（エラーに明らかなメッセージが表示されているにもかかわらず！lol）

export function createCompiler(compilerFactory: CompilerFactory) { return compilerFactory.createCompiler(); }

@SamuelMarksモジュールのproviders配列にコンパイラを含める必要があります。 上記の私のコード例をご覧ください。

Angularの世界では、「提供する」とは、モジュールのプロバイダーに何かを追加することを意味します。

親コンポーネントから動的コンポーネントの変更をキャプチャするためのヒントはありますか？ プロパティAを持つコンポーネントAがあります。 コンポーネントAは、HTTP呼び出しから返されたHTMLの文字列から動的コンポーネントコンポーネントBを作成します。 コンポーネントBの内部には、プロジェクト内で確立されたコンポーネントであるコンポーネントCの束があります。 コンポーネントCの入力プロパティの1つはプロパティAです。PropertyAの値をComponentBのインスタンスに配置することで、コンポーネントCに渡すことができます。

componentB.instance.propertya = this.propertya;

次に、コンポーネントCは初期化時に正しい値を示します。 ただし、コンポーネントAのプロパティAを変更すると、コンポーネントCには反映されません。プロパティAを共通のサービスに移動しましたが、正常に機能します（そのため、これを維持できます）。動的コンポーネントと動的コンポーネントのコンポーネントでこのプロパティを変更できますか？ 入出力変数を作成して出力イベントをサブスクライブしようとしましたが、ダイスもありませんでした。 また、ボタンをクリックしてプロパティAを変更した場合も、以下で試してみました。同じ結果です。

componentB.changeDetectionRef.detectChanges();

意味がない場合の簡単なGitHubリポジトリは次のとおりです： https ：

@ alert9k @BKHinesありがとう、ほとんど機能しました：

Uncaught（in promise）：エラー：チャンクroot-root-moduleのロードに失敗しました。

import { Compiler, CompilerFactory, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { ThisComponent } from './this.component';
import { theseRoutes } from './these.routes';

export function createCompiler(compilerFactory: CompilerFactory): Compiler {
  return compilerFactory.createCompiler();
}

@NgModule({
  declarations: [ThisComponent],
  imports: [
    CommonModule, RouterModule, RouterModule.forChild(theseRoutes)
  ],
  providers: [{ provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }]
})
export class ThisModule {}

@ alert9kによって提供された上記の例は、Ivyを使用している場合、

次のエラーが発生します。

エラーエラー：キャッチされていません（約束されています）：TypeError：Services.createRootViewは関数ではありません
TypeError：Services.createRootViewは関数ではありません
ComponentFactory_.push ../ node_modules / @ angular / core / __ ivy_ngcc __ / fesm5 / core.js.ComponentFactory_.create（core.js：18750）
ViewContainerRef_.createComponent（core.js：16282）で
parent.component.ts：35で
ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke（zone.js：391）
Object.onInvoke（core.js：24359）で
ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke（zone.js：390）
Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.run（zone.js：150）
zone.js：910で
ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：423）
Object.onInvokeTask（core.js：24350）で
resolvePromise（zone.js：852）で
zone.js：917で
ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：423）
Object.onInvokeTask（core.js：24350）で
ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：422）
Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask（zone.js：195）
drainMicroTaskQueue（zone.js：601）で

@ Igneous01どのバージョンのAngularに対してテストしていますか？

@ Igneous01 @petebacondarwin enableIvy: true場合、同じエラーが発生しました。

プロジェクトはAngularCLI8.1.3で生成されました。

Angular CLI: 8.1.3
Node: 10.15.0
OS: win32 x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

パッケージJSONファイル：

"dependencies": {
    "@angular/animations": "~8.1.1",
    "@angular/common": "~8.1.1",
    "@angular/compiler": "~8.1.1",
    "@angular/core": "~8.1.1",
    "@angular/forms": "~8.1.1",
    "@angular/platform-browser": "~8.1.1",
    "@angular/platform-browser-dynamic": "~8.1.1",
    "@angular/router": "~8.1.1",
    "bootstrap": "^4.3.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.1",
    "@angular/cli": "~8.1.1",
    "@angular/compiler-cli": "~8.1.1",
    "@angular/language-service": "~8.1.1",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

エラー：

ERROR Error: Uncaught (in promise): TypeError: Services.createRootView is not a function
TypeError: Services.createRootView is not a function
    at ComponentFactory_.create (core.js:26827)
    at dynamic-loader.service.ts:92
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:34209)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:855
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34190)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at resolvePromise (zone-evergreen.js:797)
    at zone-evergreen.js:862
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34190)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)
    at HTMLButtonElement.globalZoneAwareCallback (zone-evergreen.js:1629)

@ vunb -AngularのnextバージョンでのみIVYをテストする必要があることに注意してください。 例： 9.0.0-next.0 。

エクスポート関数createCompiler（compilerFactory：CompilerFactory）{
リターンcompilerFactory.createCompiler（）;
}

どうもありがとう！

@ alert9k

まず第一に、あなたが上で述べた優れた解決策に感謝します。 これまでのところ、非常に役に立ちました。

この方法でモジュール/コンポーネントを作成するときに、複数のコンポーネントを実装し、それらの間でルーティングするのに少し問題があります。 これを実装するためのアドバイスはありますか？

例えば、

const myModule = NgModule({
            imports: [
                RouterModule.forChild([
                    {
                        path: "",
                        component: component1,
                        pathMatch: "full"
                    },
                    {
                        path: "component2",
                        component: component2,
                        pathMatch: "full"
                    }
                ])
            ],
            declarations: [component1, component2],
            exports: [component1, component2]
        })(class {});

動作しません。 ただし、インポートを除外すると、component1がデフォルトでロードされるようになります。

動的テンプレートが必要な場合は、何か問題があります。

@djleonskennedyそれはあなたがバックアップしようとさえしなかったというばかげた声明です。 うまく機能する必要がない場合は、動かし続けてください。

カスタムフォームを表示するためにサーバーから提供されたアービトレーションテンプレートをレンダリングする必要があるタスクがありました。 テンプレートでバインディングを有効にするには、実行時にコンポーネントを作成してコンパイルする必要がありました。

それを達成するためのステップ：

• ViewContainerRef内で動的にコンパイルされた子コンポーネントを作成およびレンダリングする親コンポーネントを作成します。
• コンパイラトークンを使用してコンパイラを挿入します。
• ComponentデコレータとNgModuleデコレータ（内部の関数）を使用して、コンポーネントとそれを宣言するモジュールを定義します。
• 両方をコンパイルします。 これにより、コンポーネントインスタンスの作成に使用できるコンポーネントファクトリが提供されます。
• コンポーネントファクトリを使用して、ビューコンテナ内にコンポーネントを作成します。
• オプション：コンポーネント入力がある場合は、それに値を割り当てます。

import {AfterViewInit, Compiler, CompilerFactory, Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
import {CommonModule} from '@angular/common';
import {JitCompilerFactory} from '@angular/platform-browser-dynamic';

@Component({
    selector: 'app-parent',
    template: '<div #container></div>'
})
class ParentComponent implements AfterViewInit {
    @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
    constructor(private compiler: Compiler) {}

    ngAfterViewInit() {
        // Must clear cache.
        this.compiler.clearCache();

        // Define the component using Component decorator.
        const component = Component({
            template: '<div>This is the dynamic template</div>',
            styles: [':host {color: red}']
        })(class {});

        // Define the module using NgModule decorator.
        const module = NgModule({
            declarations: [component]
        })(class {});

        // Asynchronously (recommended) compile the module and the component.
        this.compiler.compileModuleAndAllComponentsAsync(module)
            .then(factories => {
                // Get the component factory.
                const componentFactory = factories.componentFactories[0];
                // Create the component and add to the view.
                const componentRef = this.container.createComponent(componentFactory);
            });
    }
}

覚えておくべきいくつかの事柄：

• コンパイラでclearCacheを呼び出すことを忘れないでください。 そうしないと、コンポーネントを1回しかレンダリングできなくなります。 2回目にコンパイルしようとすると、Angularは2つの異なるモジュールに存在する同じコンポーネントについて文句を言います。
• コンポーネントとモジュールの宣言で匿名クラスを使用する必要はありません。 私は実際に、アプリケーションにすでにあるクラスを使用してコンポーネントを宣言しました。
• アプリがAOTコンパイラでコンパイルされている場合、コンパイラは通常使用できません。 これを解決するには、コンパイラを明示的に提供する必要があります。

export function createCompiler(compilerFactory: CompilerFactory) {
    return compilerFactory.createCompiler();
}

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [],
    providers: [
        // Compiler is not included in AOT-compiled bundle.
        // Must explicitly provide compiler to be able to compile templates at runtime.
        {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
        {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
        {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}    ],
    declarations: []
})
export class CoreModule {}

このソリューションに問題があり、サービスを追加できません

次に、ng serve --aotを実行しましたが、このエラーが発生します。ランタイムコンポーネントにデータサービスを挿入するにはどうすればよいですか？

@jalbatross @CharlesElGriegoみんな、それが誰かを助けてくれてうれしいです（そして申し訳ありませんが他の人にはうまくいきませんでした）。 私が調査して解決策を見つけたその特定のプロジェクトでは、非常に狭いユースケースがありました。 その直後、私は別のプロジェクトに切り替えました（私は請負業者です）。Angularを1年以上使用していません（残念ながら、実験を行うための30分はありません）。 残念ながら、 @ jalbatross 、Angular関連のアドバイスを提供することはできません。 しかし、私は、特定のツールを使用して何かを行うのが非常に難しい場合、間違ったツールを使用している可能性が高いという考えを強く支持しています。 偶然にも、別のプロジェクトで同様のタスク（実行時の任意のテンプレートのコンパイル）がありましたが、今回はそのジョブにAngularを使用することを避けました。 代わりに、React + JSX + Babelを使用しました。

import * as Babel from '@babel/standalone';

const compiled = Babel.transform(
    '<div>Content</div>',
    {presets: ['react']}
).code;

テンプレートがどうしてもAngular構文である必要がある場合は、提案はありません。 ただし、フォーマットに柔軟性がある場合は、私にはわかりません...マイクロフロントエンドのクレイジーなアイデアと、Angularの海にReactの小さな島（preact？）を作成することを検討してください。

@CharlesElGriegoあなたの画像は理解するのに十分ではありません。 本当に真剣に話したい場合は、Githubでできるだけ単純な複製プロジェクトを作成してください。このプロジェクトは、1つの問題のみに焦点を当て、クローンを作成して実行することができます。

@CharlesElGriego
できることは、コンポーネントを作成しているコンテキストからサービスを渡すことです。 次に、その変数を動的に作成されたコンポーネントのインスタンスに割り当てます。

   // This is from the parent component
   constructor(private service1: service1) {

   } 
    ngAfterViewInit() {
        // Must clear cache.
        this.compiler.clearCache();

        // Define the component using Component decorator.
        const component = Component({
            template: '<div>This is the dynamic template</div>',
            styles: [':host {color: red}']
        })(class {
              // Makes service1 available in the created controller scope
              private dynamicAssignedService: service1;
              constructor() {
                console.log("Got service: ", dynamicAssignedService);
               }

             });

        // Define the module using NgModule decorator.
        const module = NgModule({
            declarations: [component]
        })(class {});



        // Services you need here 
        let sharedService = this.service1;

        // Asynchronously (recommended) compile the module and the component.
        this.compiler.compileModuleAndAllComponentsAsync(module)
            .then(factories => {
                // Get the component factory.
                const componentFactory = factories.componentFactories[0];
                // Create the component and add to the view.
                const componentRef = this.container.createComponent(componentFactory);

                // Assign the service to the component instance
                componentRef.instance.dynamicAssignedService = sharedService;
            });
    }
}

こんにちは！ @jalbatrossと@ alarm9kにご協力いただきありがとうございます
私もあなたの答えに基づいてレポを作成しました
https://github.com/CharlesElGriego/angular-aot-dynamic-components

@CharlesElGriegoありがとうございます。 私はおそらく前に言及すべきでしたが、私はこの事件について少し前に記事を書きました。 例を含むリポジトリへのリンクもあります。
https://www.linkedin.com/pulse/compiling-angular-templates-runtime-dima-slivin/

@jalbatrossねえ、@CharlesElGriego、@ alarm9k、

あなたはまた、使用するための解決策を見つけるために管理しなかったtemplateUrlではなくtemplate ？

Angularはマークアップを読み込めないため、 templateUrlを使用して実行することはできません。 これをプログラムで実施するにはどうすればよいですか？

ERROR Error: Uncaught (in promise): Error: Component 'Foobar' is not resolved:
 - templateUrl: ./foobar.component.html
Did you run and wait for 'resolveComponentResources()'?

どんな助けでも大歓迎です！

ほぼ2年前に投稿したこの問題を解決するための真の最良の解決策となるAngular9（Ivy）を待ちます。
私の問題は、実際には、Angular 9（Ivy）で簡単に実装できる「高次で動的な」コンポーネントのリクエストです。これはAngularJSでも簡単に実行できました。

@knafteN正直なところ、これが可能かどうかは疑問です。 その原因となっているAngularのコードは調べていませんが、テンプレートのURLはビルド時に解決され、プロセス自体はテンプレートのコンパイルとは別であるため、コンパイラーとは関係がないようです。

実行時にテンプレートをコンパイルするためにテンプレートURLを使用する必要があるのはどのようなユースケースですか？

コメントありがとうございます@KarlXOLと@ alarm9k

同じコンポーネントに異なるhtmlテンプレートを使用できるメカニズムを探しています。 現時点では、switchCaseステートメントで1つのテンプレートのみを使用していますが、このアプローチはかなり醜く、コードを不必要に肥大化させます。
これが必要なのは、独自のスタイルガイドとテーマを適用したいクライアントが2人いるからです。 ロジックは同じままです。

この動作は、 https：//github.com/NativeScript/NativeScriptですでに（何らかの方法で）実装されていcomponent.htmlとcomponent.tns.html ）を持つことができます。 このtns.htmlファイルは慣例によりロードされますが、Angularプロジェクトでこの動作を自分で作成する場所と方法がわかりません。
参照： https ：

ほぼ2年前に投稿したこの問題を解決するための真の最良の解決策となるAngular9（Ivy）を待ちます。
私の問題は、実際には、Angular 9（Ivy）で簡単に実装できる「高次で動的な」コンポーネントのリクエストです。これはAngularJSでも簡単に実行できました。

こんにちはAngular9がこれをどのように処理するかについてのドキュメントはありますか？ ありがとう

@jalbatrossねえ、@CharlesElGriego、@ alarm9k、

あなたはまた、使用するための解決策を見つけるために管理しなかったtemplateUrlではなくtemplate ？

Angularはマークアップを読み込めないため、 templateUrlを使用して実行することはできません。 これをプログラムで実施するにはどうすればよいですか？

ERROR Error: Uncaught (in promise): Error: Component 'Foobar' is not resolved:
 - templateUrl: ./foobar.component.html
Did you run and wait for 'resolveComponentResources()'?

どんな助けでも大歓迎です！

私はCSSスタイルで同じ問題を抱えています

@knafteN @CharlesElGriego @KarlXOLが述べたように、これはHOCの観点（高次コンポーネント）から考える必要があります。 Ivyには、HOC（新しいコンポーネントを返すコンポーネント）をすぐに作成する可能性がありますが、これは実際のAngular APIでは不可能であったか、非常に複雑でした。

HTMLコードを取得して、それを既存のコンポーネントタイプ/インスタンスとマージするという考えは、実行時に意味がありません。 アーキテクチャの主要な原則の1つは、実行時の動作を予測し、アプリケーションの安定性を保証する機能であることを忘れないでください。 HTMLを外部のどこかから取得し、制御された方法なしで使用することは、単なる盲検実験であり、開発モードでは使用できる場合がありますが、実稼働環境では使用できません。

HTMLを外部のどこかから取得し、制御された方法なしで使用することは、単なる盲検実験であり、開発モードでは使用できる場合がありますが、実稼働環境では使用できません。

実行時に任意のHTMLをコンパイルするための有効なユースケースがないと言っていますか？ それがあなたの言いたいことなら...まあ、そのためのユースケースはたくさんあります。 それらのほとんどは、ユーザーが作成してシステムに送信したHTMLテンプレートと関係があります。

@ alarm9kうん、私はあなたが何を意味するのか知っています。 そして、これが実際の主な問題です。 インターフェイスはさまざまな方法で設計できます。 それらの1つは、ユーザーから直接プッシュされたHTMLコードを受け入れることでもあります。 同じことを別の方法で別のインターフェースで行うことができますが、同じでより安全な結果が得られます。

任意のHTMLの解析について話している場合は、コンパイルとコードの他の部分へのバインドについても覚えておく必要があります。 そのためには、実行時にコンパイラーも必要です。これにより、Angularの実際のバージョンに戻ります。

HOCは異なる方法で機能します。 これは、実行時に、段階的に、部分的に、制御された方法で動的に実行できるAPIであるため、コンパイラーは必要ありません。

HOCは異なる方法で機能します。 これは、実行時に、段階的に、部分的に、制御された方法で動的に実行できるAPIであるため、コンパイラーは必要ありません。

では、これは動的コンポーネントを作成する新しい方法ですか？ ヘッドレスCMSマネージャーからCMSHtmlを取得する必要があります

@CharlesElGriego HOCAPIはまだ公開されていません。 新しいIvyレンダラーをベースにすると、設計段階にあるため、どのように機能するか、および利用可能なすべての可能性を正確に言うことはできません。 HTMLを取得し、それをコンポーネントタイプ/インスタンスにプッシュしてUIを変更するだけではないことを表現したかっただけです。

したがって、現時点では、 1つの.tsファイルのみを使用して次の分割を実現する可能性はありませんか？

• app.component.ts （条件がある場合->赤を使用する場合は青を使用する）
• app.component.red.html
• app.component.blue.html

実行時にある必要はありません。コード分割の動的な動作が必要なだけです。

@knafteN templateUrlは次のような三項演算子を受け入れるため、おそらくいくつかの追加のケースがあります。

templateUrl: config.type === 1 ? 'red.html' : 'blue.html',

ただし、Angularコンパイラーはコンパイル段階でコードを実行しないため、条件を静的に分析する必要があります。 ただし、これは動的な動作を解決するものではなく、AOTプロセス中に静的に評価されます。

@ MLC-mlapisのおかげで、あなたのバリアント作品が、vscode / webstormはtemplateUrlを評価することはできませんし、コンポーネントに使用されているHTMLファイルを知ることができないとして、htmlファイルのためのIDEサポートを表現を使用してではなく、一定の休憩:(

@knafteNうん、これは別のタイプの問題で、Angular自体には直接関係していませんが、

この機能が戻ってきたとき/もしあれば、Angularチームからのガイダンスはありますか？ コメントを軽蔑する一方で（この機能が必要な場合は、コーディング方法がわからない）、作成者は気分が良くなる可能性があります-彼らは実際には質問に答えません。 実装ユーザーにページをカスタマイズする機能を提供します。現在、長年にわたって競争上の優位性を維持してきた機能はありません。

まったく異なる有効なユースケース（IMHO）には、この機能が必要です。 私は製品を開発しています。 私自身が開発したフレームワークはサーバー側でフォームを作成し、レンダリングもそこで行われます（またはバックエンドと呼ぶこともできます）。 それは私にとっていくつかの利点がありますが、この議論から遠ざけることができます。

これで、ユーザーがたとえば製品を検索したいページで、ビジネスロジックは、システムでのアクセス許可に基づいて検索条件にさまざまな要素を設定できるというものです。 つまり、一方のユーザーは価格帯でフィルタリングでき、もう一方のユーザーはフィルタリングできない場合がありますが、2番目のユーザーは「システムに追加された日付」でフィルタリングでき、最初のユーザーはフィルタリングできません。

この場合、この検索条件フォームをバックエンドからロードし、その要素をモデルにバインドします。 同じことが、2012年頃に開発したAngular1.xでも非常にうまく機能しました。 ディレクティブテンプレートのURLはhttpURLであり、ログインしたユーザーのアクセス許可に基づいてフォームを返すために使用されるバックエンドです。 さて、Angularでは不可能のようです。
また、Reactを試してみましたが、これも不可能です。 （本番環境でのパフォーマンス上の理由から、babel /スタンドアロンを使用したくありません）。
現在最も人気のあるフロントエンドテクノロジーの両方で、このような行き詰まりにぶつかって驚いています。

AngularJS（1.x）に戻ることは、正当化するのが非常に難しいようです。

@harishrohaj HTMLコードに直接パッチを適用しないという一般的な傾向があります（Angular自体だけでなく）。そのようなシナリオをテストする可能性は非常に限られており（アプリはパッチが適用されるものをまったく知らない）、予測できない動的なものがすべて減少するためです。そのようなアプリの期待される安定性。

@ mlc-mlapis私はあなたの主張を理解しています。
実際、これは以前（AngularJSで）有効な方法/機能であったため、ユーザーとしてそれに対して考えるのは少し難しいです。
しかし、今はその考えに沿って考えており、必要な要素の情報からフォームを作成し、要素をモデルにバインドできるコンポーネントを作成することで、私の場合の問題を解決できると思います。

@harishrohajはい、AngularJSからAngularへの切り替え、特に頭が分析モデルを自動的に

@ mlc-mlapis-AngularJSから切り替えるだけではありません...この機能はAngular5まで利用可能

したがって、本当の問題は、この機能が9にあるのか（文書化されていないのか）、すぐに戻ってくるのか、誰かがCKEditorタイプのプラグインを思いついたのかということです。

@virshuそれはまだここに以前と同じ機能です。 これは、AOTバンドルアプリケーション内にJitCompilerをロードしてから、モジュールとHTMLテンプレートを動的にコンパイルできることを意味します。 そして、それは上記の理由でまだ推奨されていません。

ゲームのもう1つの点は、Ivy（まだ本番環境では利用できず、現時点まで内部使用のために実装されていない）とAPIのいくつかの新機能です。これにより、HoCコンセプトの使用や、Angularチームが参加しているコンポーネントのより柔軟な動的作成が可能になります。働く。

@ mlc-mlapis-今日は、このスレッドが開始されてから3年になります。 そして、最初から、非常に具体的な質問（テンプレートを動的にロードすることは可能ですか）を意見ベースのディスカッション（推奨されません。悪い習慣など）に変更しようとします。

あなたの明らかに間違った声明（「それはまだここに以前と同じ機能です。」）を考えると、他のコメントを額面通りに受け取ることは困難です。 したがって、可能であれば、Angularチームのメンバーに事実情報の提供を任せてください。

Děkuji:)

@virshuこのスレッドの開始者として、私はあなたに完全に同意します。 時間は飛ぶ:-)
今後のツタのリリースに、私たちに解決策を提供する何かがあることを私はまだ望んでいます

@virshuうーん、私が言ったのは何が間違っているか誤解を招くのですか？ あなたの定式化は：

この機能はAngular5まで利用可能でしたが、その後削除されました

It's still here the same functionality as before. It means that you can still load JitCompiler ...は削除されなかったことを意味し、AOTの概念はAngular 2が生まれた最初の瞬間からここにあるため、以前と同じようにここにあります。

動的な直接HTMLパッチがAngularJSで利用可能であると言いたいが、Angularではまったく利用できない場合は、その通りですが、それは別の話です。

私も。

1:55 KarlXOLのでは木、2020年3月19日に[email protected]書きました：

@virshu https://github.com/virshuこのスレッドのイニシエーターとして、私は
完全にあなたに同意します。 時間は飛ぶ:-)
今後のツタのリリースに何かがあることを私はまだ望んでいます
私たちに解決策を提供する

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/angular/angular/issues/15275#issuecomment-601002102 、
または購読を解除する
https://github.com/notifications/unsubscribe-auth/AAFMV7QNGXRPZZIHZSQSQ2TRIGXUJANCNFSM4DEFOTBA
。

+1

私は長い間このスレッドに執着していて、ダイナミックhtmlを備えたコンポーネントを見たいのですが、「もっとAngular」に気を変えることを恐れません。 理想的なケースでは、このスレッドから、ダイナミックhtmlを使用するのが最も簡単な方法である状況のベストプラクティスのようなものを期待しています。

例を想像してみましょう（ダイナミックHTMLのHello Worldではなく、もう少し広範な例です。他のユーザーが詳細を追加できます）。 ：考え：
_私は、各通貨タグ（AUDなど）、インデックス（ダウ・ジョーンズ）、為替レート（EUR / USD）、またはユーザーまたは記事へのリンク（@ userまたは＃article_id）によってこれらのタグが変換される証券取引所システムを作成しますさまざまな機能を持つAngularコンポーネントに変換します。 記事はユーザー自身が編集し、データベースに保存されます。 システムは、すべてのコンポーネントがロードされた記事を表示する必要があります。_

論理的には、単純な解決策は、データベースからロードされた動的コンテンツを持つコンポーネントです。
Angularチームの誰か（_申し訳ありませんが、これは私の可能性を超えています_）がAngularブログに記事を書くことができますか（長い間記事が公開されていないため）、現在のAngularおよび動的テンプレートを使用してこのソリューションを実現する方法（_何かのようなもの最善ですが推奨されないアプローチ_）、なぜそのようなソリューションが間違っているのか（悪いテスト、悪い効率のようなものを期待しています...）そしてAngularに準拠するようにアプリケーションを変更するにはどうすればよいですか（の設計？）デザイン（Angularを使用してそのようなアプリを表示することが推奨される場合）。

このスレッドを見たときの理想的な結果（ここで述べたように、Angularは常にこれを可能にしてきたので）は、これを動的に（間違った方法で）方法と、Angularによると正しくコーディングする方法の例です。

エンタープライズプロジェクトのバージョン2からのAngularでは、「動的テンプレート読み込み」などの機能のユースケースはありませんでした。この問題を最終的に閉じます

エンタープライズプロジェクトのバージョン2からのAngularでは、「動的テンプレート読み込み」などの機能のユースケースはありませんでした。この問題を最終的に閉じます

こんにちは、あなたは間違っていると思います...以前のコメントで、これに対する「解決策」を追加しました。これが最善ではないことはわかっていますが、現時点ではAngularを使用してヘッドレスCMSを実装する方法がないため、そのアプローチを採用する必要がありました。 ..私のテンプレートHTMLはCMS（Umbraco）から来ています

@CharlesElGriegoあなたの解決策は何ですか？ あなたの計画を説明していただければ、一緒にPRを行うことができますか？

@CharlesElGriegoあなたの解決策は何ですか？ あなたの計画を説明していただければ、一緒にPRを行うことができますか？

ああ、PRはありません、それはコアソリューションではありません...それはJitコンパイラを使ったソリューションです、それは私が私のニーズのために見つけることができる唯一のものです。 しかし、私はまだaotを使用して、ヘッドレスCMSに使用できるソリューションを探しています

https://github.com/CharlesElGriego/angular-aot-dynamic-components

あなたの場合の@CharlesElGriegoソリューションは、ヘッドレスCMSデータ構造のビルダーを実装することです。角度コンポーネントを使用することで、コンポーネントに動的テンプレートを含めることはできません。コンポーネントの動作に一貫性がなくなるためです。
@allは、この機能に焦点を当てた投稿を嫌うよりも、プログラミングを開始する方がよいでしょう。

ジー、 @ djleonskennedy-嫌いなのは、明確で実用的な質問を無意味な意見に基づいた議論に変えようとするあなたの繰り返しの試みによるものです！ 手がかりを取得してください。 Åсли14человекговорятчтотыпьян、надоидтиспать！

@virshu顔を縮めてください

どうぞ、紳士、そのような答えは私たちを前進させません。 Angularコアチームからの応答がなければ、私たちは移動しないと思います。 関係のない会話に巻き込まれてしまった場合は、あらかじめお詫び申し上げますが、 @ karaはIVYの部分に焦点を当てたアドバイスをしてくれると思います。 @shmoolは、Angularと@bradlygreenは（2018年の投稿で）動的テンプレートもIVYの利点の1つであると述べました。

このスレッドにコメントしていただければ（ng-confでの職務に関して）、この議論を簡単な方法で要約しようと思います。

• 角度のあるアプリケーションのコンポーネントには、動的テンプレート（アプリユーザーが編集できるデータベースから取得）を
• 私が間違っていない場合、現在のオプションはコンパイラを追加しています（そしておそらく角度要素を別のアプリにラップします）-これは少し不器用な解決策ですが、公式の例はありません、
• IVYで動的に作成されたテンプレートを実現する必要がある場合
• これが不可能な場合、角度アプローチに一致するようにそのようなアプリケーションの設計をどのように変更する必要がありますか？

Angularブログのこのトピックに関する記事は確かに素晴らしいアイデアでしょう。 （たとえば、IVYを使用してこれを正しく行う方法、および/またはこのアプローチが正当化されないと思われる場合は、アプリの設計の観点からアプリを変更してそのような要件を回避する方法を示します。）

よろしくお願いします

みなさん、こんにちは。Michielは、Manfredによる興味深い記事を指摘してくれました。 この記事の最後には、「実行時のコンパイル」というボーナス部分があります。 今はあまり時間がありませんが、このアプローチで完全な機能コンポーネントを作成できれば、誰かがデモを作成しようとする可能性があります。

コードの重要な部分：

import '@angular/compiler';

@Component({ template: '' }) 
class HigherOrderComponent { [...] }

ɵcompileComponent(HigherOrderComponent, { template: '<b>Hello</b>' });

あなたはそれを見ることができます： https ：

@ mlc-mlapisは、 'ng build --prod'の場合に機能しますか？ また、あなたの例では名前が一度レンダリングされるのを見ましたが、入力から変更されたときに名前を更新することができませんでした。 足りないものはありましたか？

@atirisあなたが質問をどのように提示したかが大好きです。 必要な実装が正しいかどうかを議論するのではなく、開発者に問題を解決する正しい方法を教えてもらいます。 あなたにとって良いことであり、うまくいけば、すぐに動きが見られるでしょう（HOCが答えであるかどうかによって異なります）。

@jqsjqsこれは、実際の下位互換性のためにまだ公開されていない、内部APIに関する単純な例にすぎません。 これがパブリックAPIとして利用可能になるスケジュールと、正確な形式についての正確な情報はありません。 また、ここではNgZoneは適用されないため、モデルを変更してもビューは更新されません。 ビュー->モデルの方向のみが機能します。

これについて「実際のユースケース」がどうなるかまだわからない場合は、1つに遭遇し、答えが必要です。
私は、同じサーバー上で複数のテナントを同時に処理するソフトウェアを作成している会社で働いています。 httpリクエストからテンプレートをプルできる角度コンポーネントを作成する必要があります。 これが必要なのは、クライアントがビューをカスタマイズできるようにするためです（divの並べ替え、表示されるプロパティの変更など）。 リクエストを介してテンプレートをロードする機能により、デフォルトバージョンを柔軟に作成できます。デフォルトバージョンは、存在する場合は「テーマ」バージョンで上書きされます。
テンプレートの代替バージョンが実際にアプリケーションを破壊する可能性があることを完全に理解してください。これは既知のリスクであり、受け入れられています。

@ Nixon-Josephしたがって、顧客がデフォルトのテンプレート動作を変更できるようにするそのコンポーネントのAPI（たとえば、JSONに基づく）（コンポーネントはこのAPIを内部的にサポートする）が必要であるか、バインドされた入力プロパティのセットを定義する必要があります（分離された変更検出の利点）または\に基づく予測と \テンプレートの個別の部分。

あなたの文章Fully understand that the alternate version of the template could indeed break the application, and that is a known and accepted risk.は、Angularコアチームのアーキテクチャの観点と比較して、おそらく重要な誤解です。 単に、パフォーマンス/安定性/テストの観点から真剣に保証できないものを導入することは、彼らの側からは受け入れられません。 あなたがそれがあなたの側から許容できるリスクであると宣言したとしても、それは最終決定に影響を与えません。

@ Nixon-Joseph-angular.ioを強化するアプリケーションで採用したアプローチを見てみたいと思うかもしれません。 コンテンツの各ページは動的に（HTTP経由で）ロードされ、DOMにインスタンス化されます。角度要素を使用して、特定の動的な動作を静的なコンテンツに含めることができます。 https://github.com/angular/angular/blob/master/aio/src/app/layout/doc-viewer/doc-viewer.component.ts#L131-L153を参照して

@ mlc-mlapisご回答ありがとうございます。
@pedroclaymanこれは面白そうですが、Angularが動的コンテンツをコンポーネントの一部であるかのように操作できるようにしますか？ 基本的に、完全に機能するインタラクティブコンポーネントをレンダリングする必要があります。 私はあなたが提供したものを見てきました、そしてそれは有望であるように見えます、しかし私は私たちが必要とするものを具体的に指し示す明白なもの（少なくとも私には）を見ません。

私は実際に私たちのために働く解決策を見つけました、唯一の欠点は私たちがそのプロジェクトのためにAoTコンパイルを無効にしなければならないということです。
同じことを望んでいる私の後に来る人のために-これは私がやったことの簡単な概要です。
まず、ここで私のソリューションのベースを見つけました： https ： 2Fapp.component.tsこれを共有ヘルパーに投入しました：

import { Component, NgModule, Compiler, ViewContainerRef, Type } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from '../modules/shared.module';

export class DynamicComponentHelper {
    public static addComponent<ViewModelType = any>(compiler: Compiler, container: ViewContainerRef, template: string, viewModel?: ViewModelType, components: Array<Type<any>> = []): void {
        @Component({ template: template })
        class DynamicComponent {
            public vm: ViewModelType = viewModel;

            constructor() { }
        }
        components.push(DynamicComponent);
        @NgModule({
            imports: [BrowserModule, SharedModule],
            declarations: components
        })
        class DynamicComponentModule { }

        const mod = compiler.compileModuleAndAllComponentsSync(DynamicComponentModule);
        const factory = mod.componentFactories.find((comp) =>
            comp.componentType === DynamicComponent
        );
        const component = container.createComponent(factory);
    }
}

それから私はそれをそのように呼ぶコンポーネントを持っています...

export interface VM { text: string; }

@Component({
    selector: 'app-component',
    template: `<ng-template #dynamicComponent></ng-template>`
    ...
})
export class VariationsComponent implements OnInit, AfterViewInit {
    @ViewChild('dynamicComponent', { read: ViewContainerRef }) _container: ViewContainerRef;

    private vm: VariationsComponentVM = { text: 'Hello World' }

    private viewInitialized: boolean = false;
    private componentTemplate: string;

    constructor(private compiler: Compiler) { }

    ngAfterViewInit(): void {
        this.viewInitialized = true;
        this.setUpDynamicComponent();
    }
    ngOnInit(): void {
        this.httpService.getComponentTemplate().subscribe(template => {
            this.componentTemplate = template;
            this.setUpDynamicComponent();
        });
    }

    private setUpDynamicComponent(): void {
        if (this.viewInitialized === true && this.componentTemplate) {
            DynamicComponentHelper.addComponent(this.compiler, this._container, this.componentTemplate, this.vm, [NestedComponent]);
        }
    }
}

そして、使用されている実際のテンプレートは、次のように単純である可能性があります...

<div>{{ vm.text }}</div>
<app-nested [input]="vm.text"></app-nested>

これの大きな部分は、すべての組み込みの角度テンプレート機能、すべてのディレクティブ、およびすべてです。 繰り返しになりますが、唯一の欠点は、AoTを失う必要があることです。 コンポーネントレベルでAoTを無効にすることは可能ですか/可能ですか？ プロジェクトの大部分をAoTでコンパイルできればいいのですが、定義されたものは除外します。

今のところ、私のビルドコマンドは次のようにする必要があります。
ng build ProjectName --aot=false
と
ng build ProjectName --prod --aot=false --build-optimizer=false

@ Nixon-Josephうん、それはずっと前に作成された私の歴史的なデモでした。 通常、アプリは通常どおりAOTモードでビルドできるはずです。さらに、JitCompiler（このテーマはデモコードに関するAngular GitHubの問題で説明されています）を挿入し、それを使用してアドホックテンプレートを動的にコンパイルする必要があります。 したがって、最終的には、AOT + JITを組み合わせたソリューションを組み合わせることができます。 パフォーマンス/セキュリティ/安定性の理由から、Angularコアチームからは推奨されていませんが、それでも理想的ではありませんが、機能しています。 また、コンポーネントのカスタマイズ可能なインターフェイスの拡張された可能性に投資し、制御なしでHTMLコードにパッチを適用できないようにすることをお勧めします。 JitCompilerは、一部の無効なテンプレートの使用を原則から停止することができますが、それでも、顧客をサポートする方法はあいまいすぎます。

@ mlc-mlapisコメントありがとうございます。 その.render関数で見たものを、私たちが行っていることと統合したいと思います。 しかし、私はいつ/どのように進めるかについて十分に理解していないと思います。 私の主な目標は、AoTを引き続き使用し、取得したテンプレートを介して動的コンポーネントをロードできるようにすることです。 実稼働モードでは、AoTを使用しない場合、プロジェクト（すべてのファイルを合わせたもの）はほぼ2Mですが、AoTを使用すると800K未満になります。 ソリューションをAoTコンパイルしようとすると、 addComponentの@Component部分でエラーがスローされます。
提案されたソリューションがどのようになるかについての簡単な例を提供することは可能でしょうか？ この会話をこのトレッドから引き離して、不必要に膨らませないようにしたいと思います。

@ Nixon-Josephはangular / angular-cli＃17663で開始します。これは、CLIの`buildOptimizer`の実際の問題であり、AOTコンパイルは可能ですが、ツリーシェーキングの最適化は完了していません。 再現デモはhttps://github.com/jcgillespie/ng-dynamic-optimized-reproであり、実際の最新バージョンのAngularでビルドを最適化しなくても、コンセプトを支援することができます。

@ Nixon-Josephはangular / angular-cli＃17663で開始します。これは、CLIの`buildOptimizer`の実際の問題であり、AOTコンパイルは可能ですが、ツリーシェイクの最適化は完了していません。 再現デモはhttps://github.com/jcgillespie/ng-dynamic-optimized-reproであり、実際の最新バージョンのAngularでビルドを最適化しなくても、コンセプトを支援することができます。

@ mlc-mlapis
それが今のAngularの問題です。 各機能のリクエストは、何かができる、そしてもっと頻繁にできないという技術的な理由の低さや低さについての終わりのない議論を引き起こします。
この感情的な発生について申し訳ありません。 しかし、私たち開発者は、（このような）待望の機能が遅くなり、多くの場合、提供されないのを待っています。
たとえば、他の機能は遅延読み込みなどの改善です。 他のプラットフォームと比較して、Angularが地面を失っているように見えます

私とおそらく他の多くの人は、計画された角度の特徴に関する有意義なロードマップを本当に感謝します。
ありがとう

これについて「実際のユースケース」がどうなるかまだわからない場合は、1つに遭遇し、答えが必要です。
私は、同じサーバー上で複数のテナントを同時に処理するソフトウェアを作成している会社で働いています。 httpリクエストからテンプレートをプルできる角度コンポーネントを作成する必要があります。 これが必要なのは、クライアントがビューをカスタマイズできるようにするためです（divの並べ替え、表示されるプロパティの変更など）。 リクエストを介してテンプレートをロードする機能により、デフォルトバージョンを柔軟に作成できます。デフォルトバージョンは、存在する場合は「テーマ」バージョンで上書きされます。
テンプレートの代替バージョンが実際にアプリケーションを破壊する可能性があることを完全に理解してください。これは既知のリスクであり、受け入れられています。

こんにちは、GitHubにソリューションがあります。AOTでも機能します:)
https://github.com/CharlesElGriego/angular-aot-dynamic-components

@KarlXOLわかりました。 しかし、私はまた、あなたが全体としてアンギュラーに関して部分的に不公平だと思います。 確かに、もっとうまく設計できる複雑な部品がいくつかありますが、それらの領域での破壊的な変更はさらに問題があり、非常に注意して作成する必要があることもよく理解しています。

また、主要なAngularビルディングストーンの1つである、テンプレートの動的な匿名パッチに対して直接的な位置にあるコンパイラの静的分析もあります。 私たちの多くは常に、深刻で危険な妥協をせずに双方を満足させる賢い解決策を考え、探しています。

@ mlc-mlapis
ご回答有難うございます。 あなたとあなたのチームが包括的な「心地よい」プラットフォームと環境を提供するためにAngularに投資している時間と頭脳に本当に感謝しています。 どうもありがとうございました！
しかし一方で、過去6か月間、あなたのチームは、プラットフォームを前進させることに集中できるよりも、角度、プラットフォーム、ツールの複雑さ、依存関係などに苦労しているように感じました。
開発者の日常のビジネスニーズに対する機能の出力は遅くなっています。 Ivyを例にとると、これまでは舞台裏で機能しており、プロセスや品質のアプリケーション開発を改善するためにこれまで開発者ツールボックスに登場していませんでした。

私は過去にAngularに賭けていましたが、将来はそうしたいと思っています。

これについて「実際のユースケース」がどうなるかまだわからない場合は、1つに遭遇し、答えが必要です。
私は、同じサーバー上で複数のテナントを同時に処理するソフトウェアを作成している会社で働いています。 httpリクエストからテンプレートをプルできる角度コンポーネントを作成する必要があります。 これが必要なのは、クライアントがビューをカスタマイズできるようにするためです（divの並べ替え、表示されるプロパティの変更など）。 リクエストを介してテンプレートをロードする機能により、デフォルトバージョンを柔軟に作成できます。デフォルトバージョンは、存在する場合は「テーマ」バージョンで上書きされます。
テンプレートの代替バージョンが実際にアプリケーションを破壊する可能性があることを完全に理解してください。これは既知のリスクであり、受け入れられています。

こんにちは、GitHubにソリューションがあります。AOTでも機能します:)
https://github.com/CharlesElGriego/angular-aot-dynamic-components

@CharlesElGriegoありがとう

@KarlXOL @ mlc-mlapisここであなたの両方のポイントを確実に見ることができ、議論が行われていることに感謝します。 とはいえ、私はこれについては@KarlXOLの側にいます。 私はAngularを可能な限り安全で安定させる試みを完全に理解し、尊重していますが、機能（要求されたものなど）を持っていても問題はなく、使用を禁止することを提案するドキュメントを使用して、少し邪魔にならないようにします-ここにすべての正当な理由をリストします。
これで両方のケースがカバーされますね。 誰かがこの機能を使用しない限り、安定性は失われていません。 しかし、彼らがそれを使用することを選択した場合、彼らはそれが推奨に反していることを認めなければなりません。

これは文書化されますか？ ユーザーがブログのようなページにHTMLを配置できるようにするような、ワードプレスのクライアント側を作成したいと思います。 しかし、いくつかのモデルバインディングを許可するのは楽しいでしょう。 このソリューションは良いですか、それともハッキーですか？
https://stackoverflow.com/questions/46576727/angular-compile-and-create-components-at-runtime

私はangularjsを使うのは簡単だと思います。 サーバースクリプトのインジェクションを回避するためだけに、クライアント側のレンダリングを探しています。

興味のある方のために、プロジェクトでこの問題をどのように解決したかを説明したいと思います。 まったく同じ問題がありました。HTMLとCSSがWebAPIから取得され、完全に動的です。 ビルドオプティマイザーがコンパイラーをソースから削除するため、実行時にAngularモジュールとコンポーネントをコンパイルする場合は、AOTとbuildOtimizer: true両方を使用することはできません。

このような動的なユースケースのサポートは実際には計画されていないように思われるため、Angularバブルから完全に抜け出しました。 Webコンポーネントを実装しました。 Angular Elementsやその他のフレームワークではなく、あらゆる場所で実行されているプレーンなブラウザーWebコンポーネントです。 HTMLとCSSをいくつかのバインディング情報と一緒に受け取ります。 Webコンポーネントは、アプリケーションとコンポーネントのスタイルを分離するために、新しいシャドウDOMを開くことができます。 このようにして、着信CSSまたはHTMLがアプリを壊すことはありません。

結局、私は私がなりたかったところです：AOT +データバインディングを含む実行時のWebAPIからのAngular、ダイナミックHTMLおよびCSSのビルドオプティマイザー。 Angularコンパイラ全体をランタイムにパックする必要はありません。 また、ランタイムから不要なjsを2 MB削除しただけなので、はるかに高速です。

興味のある方のために、プロジェクトでこの問題をどのように解決したかを説明したいと思います。 まったく同じ問題がありました。HTMLとCSSがWebAPIから取得され、完全に動的です。 ビルドオプティマイザーがコンパイラーをソースから削除するため、実行時にAngularモジュールとコンポーネントをコンパイルする場合は、AOTとbuildOtimizer: true両方を使用することはできません。

このような動的なユースケースのサポートは実際には計画されていないように思われるため、Angularバブルから完全に抜け出しました。 Webコンポーネントを実装しました。 Angular Elementsやその他のフレームワークではなく、あらゆる場所で実行されているプレーンなブラウザーWebコンポーネントです。 HTMLとCSSをいくつかのバインディング情報と一緒に受け取ります。 Webコンポーネントは、アプリケーションとコンポーネントのスタイルを分離するために、新しいシャドウDOMを開くことができます。 このようにして、着信CSSまたはHTMLがアプリを壊すことはありません。

結局、私は私がなりたかったところです：AOT +データバインディングを含む実行時のWebAPIからのAngular、ダイナミックHTMLおよびCSSのビルドオプティマイザー。 Angularコンパイラ全体をランタイムにパックする必要はありません。 また、ランタイムから不要なjsを2 MB削除しただけなので、はるかに高速です。

こんにちは、これの例はありますか？ ありがとう

どうぞ！ 私は現在、すべての詳細を説明する時間がないので、ここに短編小説があります：

init()とupdate()はAngularによって呼び出されます。 スパンタグの配列は「データバインド」テキストです。 確かに、コンポーネントの外部でいくつかのテンプレート解析が行われているので、値をforループしてスパンに入れることができますが、次の例では、基本的な考え方を理解する必要があります。 そして、ウィンドウにカスタムWebコンポーネントを登録することを忘れないでください...

export class TemplateContentWebComp extends HTMLElement {

  private tplDiv: HTMLDivElement;
  private tplSpans: Array<HTMLSpanElement> = new Array<HTMLSpanElement>();

  public init(templateCss: string, templateHtml: string): void {
    const template: HTMLTemplateElement = document.createElement('template');

    const css: string = `<style>:host { flex: 1; display: flex; flex-direction: column; } .tpl { flex: 1; box-sizing: border-box; }${!String.isNullOrWhiteSpace(templateCss) ? (' ' + templateCss) : String.empty()}</style>`;
    const html: string = `<div class="tpl">${!String.isNullOrWhiteSpace(templateHtml) ? (' ' + templateHtml) : String.empty()}</div>`;

    template.innerHTML = `${css} ${html}`;

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.tplDiv = this.shadowRoot.querySelector('div.tpl');

    const spans: NodeListOf<HTMLSpanElement> = this.shadowRoot.querySelectorAll(`span[data-var]`);

    if (spans != null && spans.length > 0) {
      spans.forEach(span => this.tplSpans.push(span));
    }
  }

  public update(isEditable: boolean, values: Array<string>): void {
    if (this.tplDiv != null) {
      if (isEditable) {
        this.tplDiv.removeAttribute('tpldisabled');
      } else {
        this.tplDiv.setAttribute('tpldisabled', '');
      }
    }

    for (let i = 0; i < this.tplSpans.length; i++) {
      this.tplSpans[i].innerHTML = values[i];
    }
  }
}

このコメントを読んで、この問題もここで閉じることができると思います😞

https://github.com/angular/angular-cli/issues/17663#issuecomment -705737272

こんにちは、私はかなり長い間、複数のテンプレートを1つのコンポーネントにロードする方法を探していました。 @ alert9kの投稿のおかげで、これを行う方法を見つけることができました。 もちろん、コンパイラが必要なため、本番モードで起動することはできないため、この方法は一時的なものにすぎません。

そのため、何ヶ月もの間、これを行う方法を探していましたが、本番モードでした。
他に何も見つからなかったので、これは実際には役に立ちませんでした。最後の手段として、StackOverflowで質問したところ、質問にいくつかの報奨金が追加され、最後に追加すると、これを完全に実行できる回答が得られました。

もちろん、個別のスタイルシートが必要な場合は、データベースからロードした後でスタイルシートをhtmlテンプレートに追加するだけで、問題なく機能します（おそらく、最善ではありませんが、機能します）。 もちろん、私の質問に答えた人にすべてのクレジットが与えられるので、この答えを私にクレジットしないでください。

https://stackoverflow.com/questions/63998467/angular-multiple-templates-in-one-component-based-on-id-with-template-store

@BillyCottrellそれはあなたが前もって知っていることにも依存します。 すべてのテンプレートを事前に知っている場合は、いつでもnodeスクリプト（または同様のもの）を実行して、それらをすべて一緒に補間できます。 ngを使用してこれを直接行う方法はおそらくあり、公開されているWebpackのほんの一部をハッキングします…

@SamuelMarksは本当ですが、これはサーバーからテンプレートをリクエストするときに使用できます。例のinnerHTMLは非同期で動作するため、事前にテンプレートを知る必要はなく、事前にロードすることもできます。サーバーからそれらを要求する必要がないので、それをより速く動作させるだけです。 タイマーやスイッチテンプレートと組み合わせることも可能です。 これは、知っていることに関わらずテンプレートをロードする簡単な方法であり、必要に応じて後で更新して、別のテンプレートまたは新しいバージョンのテンプレートを表示することができます。

つまり、既知のテンプレートを使用してテンプレートサービスを簡単に作成できるということです。 それらのテンプレートをそれに追加し、必要に応じて、既知のテンプレートの1つを選択するか、必要に応じてサーバーから新しいテンプレートを追加します。
行う必要があるのは、サーバーからの自作テンプレートとしての既知のテンプレートの両方を含むサービスをロードすることだけです。 これは、サーバーからテンプレートをロードできない場合に適しているため、既知のテンプレートの1つにフォールバックできます。 したがって、もうハックする必要はありません。

ええ、事前に作成されたテンプレートがここでの鍵です。 AOTを知っている場合は、前述のhttps://github.com/SamuelMarks/ng-md-components （マークダウンテンプレートを使用できます）のように、楽しい時間を過ごすことができます。 依存関係をアップグレードし、複数のテンプレートを組み合わせて組み合わせるためのサポートを追加するのは簡単です（誰かが気にかけていると仮定します。ただ示してください）。