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?

https://github.com/aspnet/JavaScriptServices/blob/dev/templates/AngularSpa/webpack.config.vendor.js — lbrahim, May 19 '17 at 13:22

score 5 · Answer 1 · edited Sep 03 '17 at 15:10

5

I was looking for the exact same thing.

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

edited Sep 03 '17 at 15:10

Eduard Dumitru

answered May 29 '17 at 17:40

Serge Caron

everytime I run webpack --config webpack.config.vendor.js I get TypeError: dep.getResourceIdentifier is not a function any thoughts? – Bryan Dellinger Jul 13 '18 at 19:33

score 4 · Accepted Answer · edited Dec 21 '17 at 09:26

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

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.
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', ];
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.
Finally, run this command in the root of project: webpack --config webpack.config.vendor.js

2 Answers2