Notes From a Full-Stack Developer

Kevin Raffay's WordPress Blog

Setting up Angular 4 with Bootstrap

leave a comment »

I’ve been doing a lot of Angular development at my current contract, and there was a bit of a learning curve because of all the recent changes.  In the next few posts I’ll try to document the steps to get up and running and links to good resources that helped me get up and running.

I recommend starting with this Sitepoint post:

The Ultimate Angular CLI Reference Guide

 When you get to the point where you can see “app works!” in the browser, adding bootstrap support is not that intuitive.  First run this in the same folder that your angular-cli.json file is in:

 npm install --save bootstrap

 

You will then need to update the angular-cli.json file.  In the apps/styles node add a reference to the bootstrap css file:

"styles": ["../node_modules/bootstrap/dist/css/bootstrap.min.css","styles.css"],

 

To confirm that bootstrap is installed, run ng serve and you will see that your “app works!” text is no longer be rendered in a Times New Roman font, but in Arial.

 

 

Advertisements

Written by Kevin Raffay

July 18, 2017 at 6:58 pm

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: