Saturday, October 1, 2016

Step-by-step building an Angular Material 2 application with Angular CLI

Look no further for up to date but complex Angular 2 seeds and start using Angular CLI.

Angular CLI is now based on Webpack but is simpler.


  • Angular 2.0.0 / 2.0.1
  • Material 2.0.0-apha9-3

Project creation

From the command line console (elevated on Windows):
  • Upgrade the Node version.
  • Install Angular CLI globally: 
npm install -g angular-cli
  • Create the project with SCSS support: 
ng new myapp --style=sass

If you are using WebStorm the project creation could also be done with the Angular CLI based.

From here you can always test the application launching it with:

ng serve

Project properties

  • Edit package.json and ...
    • Set the version.
    • Change the license property (or remove it and set private to true).
  • Edit index.hmtl and change the title as required.

From CSS to SASS

This is usually automatically done with --style=sass flag on the project creation but reviewing it is suggested.
  • Edit angular-cli.json and ...
    • Change "styles": ["styles.css"]  to "styles": ["styles.scss"] 
    • Change "styleExt": "css" to "styleExt": "scss"
  • Rename styles.css to styles.scss
  • Rename app.component.css to app.component.scss

Angular 2 version upgrade (Optional)

You can upgrade Angular 2.0.0 to the last stable 2.0.1 version editing package.json and changing the following versions:

"@angular/common": "2.0.1",
"@angular/compiler": "2.0.1",
"@angular/core": "2.0.1",
"@angular/forms": "2.0.1",
"@angular/http": "2.0.1",
"@angular/platform-browser": "2.0.1",
"@angular/platform-browser-dynamic": "2.0.1",
"@angular/router": "3.0.1",    

Material installation

  • Install the material module:
npm install --save @angular/material
  • Install the HammerJS dependency and its types:
npm install --save hammerjs
npm install --save-dev @types/hammerjs

  • Edit app.module.ts and add:
import { MaterialModule } from '@angular/material';

imports: [

Material icons linking (Optional)

  • Add the Material Icons link on index.html:
<link href="" rel="stylesheet">

Material theme customization (Optional)

Favico setup (Optional)

  • Remove favico.ico from src (it's a CLI bug, that's not its location)
  • Add your own favico.ico to the assets folder
  • Edit index.html and change favico.ico to assets/favico.ico  

Backend proxy setup (Optional)

Useful during development to route certain URL requests to a real server (usually REST calls).
  • Add a proxy.conf.json file on the project root folder with the following contents:
  "/api": {
    "target": "http://localhost:8080/myapp",
    "secure": false

You can start using it with: 

ng serve --proxy-config proxy.conf.json

However it could be simplified by editing the package.json and adding a script:

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json",

So you can now launch it easily with:

npm start

Bundling for production 

You can always generate the production bundles on the dist folder with:

ng build --prod --bh /myapp/

However it could be simplified by edidting the package.json and adding a script:

"scripts": {
    "build": "ng build --prod --bh /myapp/"

So you can now launch it easily with:

npm run build

Internet resources

No comments:

Post a Comment