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:

Then, to start a new Angular2+ project:

Adding Font Awesome to WebPack

  1. Go to the root folder of your project and add Font Awesome to your project’s dependencies:
  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.
  3. Now we need to rebuild the vendor.js file. In the root of the project, type:

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