[解決済み】Angular 2 + CLIプロジェクトにfont-awesomeを追加する方法

質問

Angular 2+とAngular CLIを使用しています。

プロジェクトに font-awesome を追加するにはどうすればよいですか？

どのように解決するのですか？

Angular 2.0ファイナルリリース後。 Angular2 CLIプロジェクトの構造が変更されました。 - ベンダーのファイルやsystem.jsは必要なく、webpackだけが必要です。だから、そうするのです。

1. npm install font-awesome --save

2. での angular-cli.json ファイルの中で styles[] の配列を作成し、ここに font-awesome の参照ディレクトリを追加します。

   "apps": [
       {
         "root": "src",
         "outDir": "dist",
         ....
         "styles": [
             "styles.css",
             "../node_modules/bootstrap/dist/css/bootstrap.css",
             "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
         ],
         ...
     }
     ]
   ],
   
   

   最近のAngularのバージョンでは angular.json ファイルの代わりに ../ . 例えば、次のようにします。 "node_modules/font-awesome/css/font-awesome.css" .

3. 好きなhtmlファイルに、フォントの効いたアイコンを配置します。

   <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>
   
   

4. アプリケーションを停止する Ctrl + c を使ってアプリを再実行します。 ng serve というのも、ウォッチャーは src フォルダのみで、angular-cli.json は変更を観測しないためです。

5. 素晴らしいアイコンをお楽しみください。