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
cli.angular.io ng2 Style guide

npm install -g angular-cli

Errors

Permissions - fixing npm permissions

Set Registry - npm registry

Other...


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

ng new my-app

Additional options:

--style=sass

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
RouterModule.forRoot(routes)

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

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

//app.routes.ts
import { Routes } from '@angular/router';

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

export const routes: Routes = [
  ...HomeRoutes,
  { path: '**', redirectTo: 'home', pathMatch: 'full'}
];
            
//the router views container
router-outlet

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

Use a spacebar or arrow keys to navigate