Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

  • what's angular-cli
  • Installation (common errors)
  • Setup and manage a project
  • Setup the routing (not included in ng-cli)
  • Adding external libraries ng2 Style guide

npm install -g angular-cli


Permissions - fixing npm permissions

Set Registry - npm registry


                npm uninstall -g angular-cli
                npm cache clean
                npm install -g angular-cli@latest

ng new my-app

Additional options:


Serve locally:

ng serve (--prod)

  • ng   generate/g
  • compnent/c
  • directive/d
  • pipe/p
  • service/s
  • class/cl
  • enum/e
  • module/m
  • name

--flat; --route (* not working ATM)

//add to app.module.ts
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';

//in imports

import { Route } from '@angular/router';
import { HomeComponent } from './home.component';

export const HomeRoutes: Route[] = [
    path: 'home',
    component: HomeComponent

import { Routes } from '@angular/router';

import { HomeRoutes } from './home/home.routes';

export const routes: Routes = [
  { path: '**', redirectTo: 'home', pathMatch: 'full'}
//the router views container

            //link to the home route
            routerLink="/home" routerLinkActive="active"
                npm install bootstrap@next --save
                //angular-cli.json -  insert into apps[0].scripts:
                "scripts": [
                "styles": [
or import the bootstrap.scss into your styles.scss
  • e2e
  • test
  • build --prod
  • ...
Start with ng2 and angular-cli today!

Use a spacebar or arrow keys to navigate