Getting Started Build Angular 6 Web Application

A comprehensive step by step tutorial on building Angular 6 web application while exploring the new Angular 6 Features. There is some improvement from previous stable release version, please check the changelog here. Base on that changelog, we will start this tutorial from the scratch while we learn and explores the new feature that shown in the changelogs. For more theory and basic explanation, you can find in the Angular 6 docs here then find for the latest stable 6.0.0 version.

The following tools, frameworks, and modules are required to complete this Angular 6 tutorial:

- Node.js (Recomended version)
- Angular 6
- Angular-CLI
- Terminal (Mac/Linux) or Node Command Line (Windows)
- IDE or Text Editor

We assume that you have downloaded and installed Node.js environment. Now, let's check the above requirement by open the terminal or Node command line then go to your projects folder. Type this command to check the latest Node and NPM version.

node -v
v8.11.1
npm -v
6.0.0

That's our Node and NPM versions, let's move to the main steps of the Angular 6 web application tutorial.

1. Install Angular CLI and Create Angular 6 Web Application

To install or upgrade the latest Angular 6 CLI, type this command in the terminal or Node command line.

sudo npm install -g @angular/cli

If you use windows, it might be not necessary to add `sudo`. Next, create a new Angular 6 Web Application using this Angular CLI command.

ng new angular6-start

Next, go to the newly created Angular 6 project folder.

cd ./angular6-start

Now, you run the new Angular 6 web application using your own host and port.

ng serve --host 0.0.0.0 --port 3000

Open your browser then go to this address `http://localhost:3000` and you will see the classic Angular page.

That the initial Angular 6 Application. Next, we will try the new feature that comes with the new Angular CLI.

2. Turn Angular 6 Application into PWA

The feature that comes with the new Angular 6 CLI is `ng add`. First, we have to try convert or turn the regular Angular 6 application to the Progressive Web Apps (PWA). Type this command to add that feature.

ng add @angular/pwa

If there's something wrong with dependencies or mismatch versions like this.

npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/com[email protected] but none is installed. You must install peer dependencies yourself.

We can now update to the required version above simply by using this command.

ng update @angular/core

That command is the new feature in Angular 6. Now, if you check the `package.json` dependencies, it will turn to the latest Angular versions.

...
"dependencies": {
  "@angular/animations": "^6.0.1",
  "@angular/common": "^6.0.1",
  "@angular/compiler": "^6.0.1",
  "@angular/core": "^6.0.1",
  "@angular/forms": "^6.0.1",
  "@angular/http": "^6.0.1",
  "@angular/platform-browser": "^6.0.1",
  "@angular/platform-browser-dynamic": "^6.0.1",
  "@angular/pwa": "^0.6.1",
  "@angular/router": "^6.0.1",
  "core-js": "^2.5.4",
  "rxjs": "^6.0.0",
  "zone.js": "^0.8.26",
  "@angular/service-worker": "^6.0.0"
},
"devDependencies": {
  "@angular/compiler-cli": "^6.0.1",
  "@angular-devkit/build-angular": "~0.6.1",
  "typescript": "~2.7.2",
  "@angular/cli": "~6.0.1",
  "@angular/language-service": "^6.0.1",
  "@types/jasmine": "~2.8.6",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.2.1",
  "jasmine-core": "~2.99.1",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~1.7.1",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~1.4.2",
  "karma-jasmine": "~1.1.1",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.3.0",
  "ts-node": "~5.0.1",
  "tslint": "~5.9.1"
}
...

Back to the PWA, we have to run the Angular 6 PWA application. First, build the Angular 6 PWA by type this command.

ng build --prod

Next, install `http-server` using NPM command.

sudo npm i -g http-server

Next, go to the built Angular 6 PWA application.

cd dist/angular6-start/

Now, we can run the Angular 6 PWA using HTTP-server.

http-server -p 8000

Open the private window or incognito window of the browser, then point to the address `http://127.0.0.1:8000`. You should see the same page as previous ANgular 6 page.

Next, let's test if the service worker is working by right click the mouse in the blank browser window then click Inspect. After inspector window or pane showed up, click on the Network tab then click an offline checklist.

Now, if you refresh the browser, you still can see the same page as previous instead of standard browser `There is no Internet connection`. You will see the difference when you run the Angular 6 app using `ng serve`.

3. Generate Angular 6 Material Components

Another new feature in Angular 6 is Angular Component that focused material to an existing Angular application. Type this Angular 6 CLI command to add it.

ng add @angular/material

There will be available Angular Starter Material Component. Let's try the starter component for Navigation pane. You may generate the Navigation Component using this command.

ng generate @angular/material:material-nav

But we will using the navigation component in existing App root component. For that, open and edit `src/app/app.component.ts` then add this imports.

import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';

Add this variable after an existing variable.

isHandset: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);

Add the constructor after that variable.

constructor(private breakpointObserver: BreakpointObserver) {}

Next, open and edit `src/app/app.component.html` then replace all HTML tags with this tags.

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="isHandset ? 'dialog' : 'navigation'"
    [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
    [opened]="!(isHandset | async)!.matches">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="(isHandset | async)!.matches">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Application Title</span>
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

Next, give it a style by open and edit `src/app/app.component.css` then add this lines of CSS syntax.

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
  box-shadow: 3px 0 6px rgba(0,0,0,.24);
}

Now, run again the Angular 6 application by type this command.

ng serve

And you will see this new navigation page.

That it's for now, just a few new features of Angular 6. We will cover another feature or this with more detailed. You can find the full working source code on our GitHub.

That just the basic. If you need more deep learning about MEAN Stack, Angular, and Node.js, you can find the following books:

• Angular 4 Projects
• Pro MEAN Stack Development
• Practical Node.js
• Pro Express.js

For more detailed on MEAN stack and Node.js, you can take the following course:

• Angular (Angular 2+) & NodeJS - The MEAN Stack Guide
• Start Building Web Apps And Services With Node. js + Express
• Build a REST API with node. js, ExpressJS, and MongoDB
• Angular 5 Bootcamp FastTrack

Thanks!