September 23 2016

Setting up and using Angular 2 CLI

Michael Lynch Software Development AngularJS 0

Angular 2 CLI is still in beta at the time of this writing, but it is also recommended to use it for new projects. After reviewing the basic features and setup, I wanted to corral all my learnings into one location so that I can re-use it for future projects. The website for the CLI directs you to the GitHub page, and that is where most of this information was found.

Installation

Although I almost never install any node module globally, that is the recommendation for the angular2 CLI. I recommend if you’re not using NVM, to install that first, and then install angular CLI.

nvm use 6
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

Creating a Project

Since I usually prefer SCSS so this is how I create a new project

ng new sassy-project --style=sass

After a few minutes you should see:


Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.

After it completes, you can verify your project. You can also launch your project locally using serve.

ng serve

After a few seconds you will see:


Time: 7719ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js    2.83 MB    0, 2  [emitted]  main
 styles.bundle.js    10.3 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map     2.9 MB    0, 2  [emitted]  main
       styles.map    14.4 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  479 bytes          [emitted]  
assets/.npmignore    0 bytes          [emitted]  
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.81 kB       0       
webpack: bundle is now VALID.

Now you can open a browser to http://localhost:4200 and you will see your project.

Testing

To run the tests using Karma, use test:

ng test

Running tests this way will cause the tests to continuously run. If you want to run them as part of a build, or a Jenkins job for instance, and you want them to only run once, you can use the watch flag. You can also use the alias for tests, ‘t’ instead of test.

ng t --watch false

End to end tests are run with Protractor. To launch them you must have the application running. So you can open a second terminal window, and run ng serve (from above) in one window, and then run e2e in the second window.

ng e2e

Adding Bootstrap

A common thing to do at the start of a new project is to add all the frameworks and libraries that you want to use. A very common addition is Bootstrap. For this project, I choose to use NgBootstrap instead of the bootstrap default JS, so that it would be easier to include Angular in the components.

npm install --savedev bootstrap@4.0.0-alpha.4
npm install --save @ng-bootstrap/ng-bootstrap.

Once that is complete, you will need to include it in your scripts for the project. Edit your angular.cli file in your the root of the project, and add bootstrap to the styles section.

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.sass",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

Next rebuild node-sass for the changes to take place.

npm rebuild node-sass

Finally, add the import and add the module to the imports for the module to your app-modules.ts file:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Thats it, the final getting started app: