問題タブ [angular-templatecache]

angularTemplatecacheをgulpで使用して、すべての HTML を templates.js ファイルに入れていますが、エラーが発生し続け、動作していないようです。

このエラーは、ng-include を含むテンプレートから発生しているようです。これは、templates.js ファイルからそれらを削除して正常にロードすると機能するためです。これは私に問題を与えている1つのテンプレートです

getTemplate 関数はこのようなものです

これを解決する方法について何かアイデアはありますか?

編集: ここに私の template.js があります。ファイルには他にもありますが、簡単にするために削除しました

AppRoot はアプリケーションのルート モジュールです

AngularJS では、外部テンプレートをスクリプト タグとして、または Web サーバー上の html ファイルとして提供できます。しかし、これらのテンプレートを取得するカスタム ロジックを実装する必要があり、どのメソッドも適合しません。そこで、テンプレートが実際にサーバーから読み込まれる AngularJS のセクションを書き直すことができると考えました。しかし、これに関する情報を見つけるのはかなり難しいことがわかりました。がこのタスクに使用されていることがわかりましたが$TemplateRequestProvider、それをカスタム ロジックに置き換える方法がわかりません。あなたは私を助けることができます？

大規模な AngularJS 1.6 プロジェクト (最大 120 個の JS ファイル) があり、現在は gulp/bower でビルドされています。

yarn と webpack の使用への移行を検討しており、webpack を実装するためだけにプロジェクト ファイルを変更する必要はありません。各 AngularJS コンポーネントの JS ファイルは IIFE にラップされているため、既にグローバル スコープから外れています。

gulp ステップの 1 つはgulp-angular-templatecacheモジュールを使用します。これは、すべての HTML ファイルを収集し、それらを単一の $tmplateCache ローダー モジュールにきちんと圧縮します。

webpack を使用して他のビルド プロセスのほとんどを解決する方法を見つけることができましたが、これが問題を引き起こしています。

私はngtemplate-loaderパッケージを見てきましたが、次の理由から、これが私たちのニーズに合うとは思いません:

• 「require("./template.html")」を使用するには、既存の HTML テンプレートをすべて更新する必要があります。
• これにより、HTML テンプレートごとに個別の webpack モジュールが作成されますが、これは非常に非効率的です。
• おそらく最も重要なことですが、私はそれを機能させることができませんでした。

私がセットアップした現在の webpack 構成は、単純なデモに基づいており、ベンダー ファイルからプロジェクト ファイルを分割しています。プロジェクト ファイルは、/dist フォルダー内の「app.[hashcode].js」ファイルにまとめられています。

最終的に、コンパイル済みの $templateCache モジュールを、最終的な「app.[hashcode].js」バンドル ファイルの特定のポイントに挿入できるようにしたいと考えています。ただし、現時点では、$templateCache 定義ファイルが別のバンドル ファイルに作成されていることに満足しています。

このビルドステップを完了するために使用できる既存の webpack プラグイン、ローダー、またはプラグイン/ローダーの組み合わせはありますか? これはwebpackでも可能ですか?

これは、デモ プロジェクトのベース ディレクトリ構造です。

これは現在動作中の webpack.config.js ファイルです。

これは、webpack の「エントリ」ファイル app/app.js です。

必要に応じて、サンプル プロジェクト全体を提供できます...