問題タブ [angular-fontawesome]

当社がライセンスを購入した Font Awesome Pro 6 を Angular プロジェクトに統合したいと考えています。

上司から zip ディストリビューション (更新の対象となる NPM プライベート トークンではありません) を受け取ったので、 @fortawesome/angular-fontawesomeをアップグレードしてプロ バージョンを使用したいと考えています。

これまでは無料版の FA と を併用してきました@fortawesome/free-solid-svg-icons。特に、このライブラリは、トランスパイル中に使用される Typescript シンボルを宣言します。

私が持っていた前に（package.json）

質問: 以下で構成される FA Pro 6 の zip ファイルが与えられた場合

フォントを Angular プロジェクトに統合するにはどうすればよいですか?

これまでに試したこと

src/font-awesome-proFA 6 Pro ディレクトリを に解凍し、最後の 4 つのパッケージ (上記のリスト) を から削除しようとしましたpackage.json。

angular.jsonまた、手動でscssとjsを追加することを修正することも期待していました

しかし、私のアプリケーションはコンパイルされません

また

使用例は、クライアントが使用しないアイコンをダウンロードする必要なく、実行時までそれらのアイコンがどうなるかを必ずしも知ることなく、文字列から任意のFontAwesome アイコンを使用できるようにすることです。

ここで説明されているアイコン ライブラリ アプローチを使用して、 angular-fontawesome を使用しています: https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/icon-library.md

この構文例では:

faCoffeeしたがって、理想的には、パーツを動的にすることが可能です。静的分析はそれfaCoffeeがインポートされていることを確認できることを知っているので、それをバンドルすることを知っており、それが動的変数である場合、どのエクスポートが必要になるかを推測できない可能性があります-しかし、その時点で、 Webpack、またはその他のユーティリティには、コードをビルドに含めることができますが、実行時に必要な場合にのみクライアントにダウンロードできるものがあります。

いくつか試してみました。

私はこの試みを認識していましたが、これは Vue であり、うまくいかないかもしれません: https://github.com/FortAwesome/vue-fontawesome/issues/170#issuecomment-484544272

ここで説明されているように、ツリー シェーキングを放棄してディープ インポートを使用できることはわかっています: https://fontawesome.com/v5/docs/apis/javascript/tree-shaking#alternative-to-tree-shaking-deep-imports

すなわち

だから私はhttps://dmitripavlutin.com/ecmascript-modules-dynamic-import/#1-dynamic-import-of-modulesに基づいて、その周りのアプローチを試みました。

これは明らかに機能し、IconDefinition をライブラリに追加するだけで済みます。switch ステートメント内では、faCoffee実行時にコードが実行されるときにのみバンドルがロードされることを意味します。

ただし、何か動的なことをしようとすると:

当然のことながら、バンドルされていないため機能しません。

実際、importドキュメントには、達成可能な最善の方法はファイル全体をインポートすることであると記載されています。 https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import https:// javascript.info/modules-dynamic-imports#the-import-expression

この回答は、それが不可能である可能性も示唆しています: https://stackoverflow.com/a/55744858/1061602

ただし、これは正しいアプローチで可能かもしれないことを示唆しています: https://stackoverflow.com/a/65298694/1061602

動的インポートとコード分割に関する情報がここにたくさんあることがわかります。いくつか試してみましたが、何をすべきかよくわかりません。https://webpack.js.org/guides/code-splitting/#dynamic-imports

代わりに使用できる FontAwesome 用の他のプラグインがあるかもしれません。

または、誰かが次の行に沿って大規模な switch ステートメントを作成した可能性があります。

これもうまくいきます。