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:
Adding Font Awesome to WebPack
- Go to the root folder of your project and add Font Awesome to your project’s dependencies:
npm install font-awesome --save
- Edit the
const nonTreeShakableModules = [
- 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.