問題タブ [raw-loader]

エクスポートされた webpack で angular 6 と angular cli 1.7 を使用しています。要件は、amd モジュールを使用し、html をコンポーネントにインポートすることです。

「npm start」を実行すると、ターミナルで例外が発生してエラーが発生します

私はwebpackローダーを見始め、私が使用した1つの投稿を見始めました

これはコンパイルに役立ちましたが、アプリはエラーになります。したがって、開発ツールでは、次のようなログが表示されます

どうすればいいのかわかりません:(「text!./app.component.html」のようなインポートを引き続き使用し、コンパイルして実行するにはどうすればよいですか。

助けてください。

module.d.ts には

通常、生の文字列をインポートする必要がある場合は、 を使用しますraw-loader。一般的な使用例は次のとおりです。

1. ソースコードに次を追加します。

2. a.txt.js以下を含むファイルを生成します。

3. <script charset="utf-8" src="/a.txt.js"></script>インポートするソース コードは、HTML HEAD セクションに追加するものを生成します。

4. ブラウザが両方のスクリプトを評価した後、webpack マジックにより、es6 インポートのように見えます。

これは、es6 のインポートが通常どのように見えるかです。raw-loader は、動的インポートを使用したハックのように見えます。しかし、モジュールa.txtにするのではなく、宛先ディレクトリにコピーするだけですか? es6XmlHttlRequest を使用して厄介なラッパーを作成することなく、エレガントなソリューションが必要です。Webpackにそのようなプラグインはありますか?

他にも同様のツールがいくつかあります。

• file-loader- ファイルを dist ディレクトリにコピーし、ファイル名を返します。これにはまだいくつかのラッパーが必要であり、es6-module ほどエレガントには見えません。
• html-loader- HTML を解析してsrc属性を検索することにより、HTML のみをサポートします。