Lesson Weekend

There are a few more steps we need to complete before we can begin developing. As you saw in the last several lessons, Angular CLI has generated the vast majority of starter code we need in a new Angular project. However, we need to include Bower ourselves.

In this lesson, we'll walk through how to install Bower into an Angular CLI-generated application and update our .gitignore file accordingly.

Bower

We'll use Bower for our front-end dependencies. Angular CLI does not install and configure Bower automatically so we'll have to add it to our projects again.

Installing Bower

You should already have Bower installed on your own machine since our curriculum has used it for the past several weeks. You can double-check by running the following command:

$ npm list -g bower

If you receive any version number, you're ready to go:

[email protected] 

If you do not receive a version number, you'll need to install bower globally using the following command:

$ npm install bower -g

Initializing Bower

In our project directory, we can initialize Bower with the following command:

$ bower init

You will be prompted with a series of questions about your project. You can simply press Enter for each to accept the default value.

This will add a new bower.json file to your directory:

online-store/bower.json
{
  "name": "online-store",
  "description": "",
  "main": "",
  "authors": [
    "Epicodus Student <[email protected]>"
  ],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

.gitignore

We'll also want to include /bower_components under the #dependencies section. (We'll install Bower in just a moment). Make sure to do this now:

your-project-name/.gitignore
...
# dependencies
/node_modules
/bower_components
...

Installing Bower Dependencies

Again, any time we need a front-end dependency we can use the $ bower install packagename --save command to add it to our project.

For instance, we'll install Bootstrap now, like this:

$ bower install bootstrap --save

However, this won't automatically include the package in our application.

We also need to tell Angular CLI to include this package's code when it builds and serves our app. We can do that in the angular-cli.json file that contains build configurations.

angular-cli.json
...
"apps": [
    {
      ...
      ],
      ...
      "styles": [
        "styles.css",
        "../bower_components/bootstrap/dist/css/bootstrap.css"
      ],
...

We'll add the file path to Bootstrap's stylesheet in the "styles" section of angular-cli.json.

This angular-cli.json file contains settings and configurations that tell the Angular CLI tool how to build our projects. By including the Bootstrap stylesheet from our Bower package here in styles, we're instructing Angular CLI to include this file in the build.

For more details on how Bower works with Angular, revisit the Angular Setup: Dependencies, Build Tools, and TypeScript lesson from last week.

We're almost done setting up our project. In the next lesson, we'll discuss how to continually use Angular CLI during the course of development, including how to build and serve projects and also how to create new components, pipes, and other content directly through the command line.