How to add font awesome to ASP.NET Core Angular 2 application in Visual Studio 2017 with SpaTemplates

Question

I am using the Single Page Application Template in Visual Studio 2017 in order to create an Angular 2 application.

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

And then created the application like this:

dotnet new angular

What is the reccommended way of importing third Party libraries like font awesome into the Angular 2 application?

Answer 1

I was looking for the exact same thing.

Finally found the answer here: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

Don't forget to do:

webpack --config webpack.config.vendor.js

as mentioned and also make sure you also restart the ASP.NET Core pipeline upon doing so.

Regards

Answer 2

Credit original post

This is for .NET Core 2, after you create a SPA Project using dotnet new angular:

1. Go to the root of the project and install the package: npm install font-awesome --save. You should now see it in package.json dependencies.

2. After that go to webpack.config.vendor.js and add font awesome to the array under non tree shakable modules:

   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 tell the webpack that we added this new package. So if you haven't done so before install this in the root of project with npm install --save-dev npm-install-webpack-plugin.

4. Finally, run this command in the root of project: webpack --config webpack.config.vendor.js