If you’re using Visual Studio 2017’s SPA templates for Angular, no doubt you’ve wanted to add third-party libraries such as Font Awesome.  You could reference these dependencies in the index.html, but it would be better for performance if they were included in the webpack bundle.  If you’ve never worked with webpack before, this could initially be a little confusing.  But, don’t worry as it’s actually pretty simple.

Installing SPA Templates

If you’ve not done so, you can easily install the SPA templates. From a developer command-line, enter the following:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Then, to start a new Angular2+ project:

dotnet new angular

Adding Font Awesome to WebPack

  1. Go to the root folder of your project and add Font Awesome to your project’s dependencies:
    npm install font-awesome --save
  2. Edit the webpack.vendor.conf.js and add Font Awesome to the array nonTreeShakableModules. Normally, webpack is used to compress JavaScript files and we would provide the main entry file for the library. Since Font Awesome is a CSS library, we need to specifically add a reference to the CSS file.
    const nonTreeShakableModules = [
        'bootstrap', 
        'bootstrap/dist/css/bootstrap.css', 
        'es6-promise', 
        'es6-shim', 
        'event-source-polyfill', 
        'font-awesome/css/font-awesome.css', 
        'jquery'
    ];
  3. Now we need to rebuild the vendor.js file. In the root of the project, type:
    npm ./node_modules/.bin/webpack --config webpack.config.vendor.js

That’s it! References to Font Awesome’s CSS library have been added and your application can now use it.