Coding for Entrepreneurs

Angular Setup, Install, & Build Guide

By Justin

Angular Setup, Install, & Build Guide
This is a step-by-step setup guide to setup Angular v.5, the latest version of Angular 2, on your computer. Adapted from docs on Angular CLI.

1. Install Node.js from here

After downloading Node.js, the node package manager (npm) should automatically be installed. Test it out by doing:
$ npm --version

2. Install Angluar CLI via npm:

$ npm install -g @angular/cli

3. Navigate to project directory:

$ cd ~/Dev/
$ mkdir appDir && cd appDir 
$ ng new cfe-app
ng new takes a minute to run.

4. Navigate to project & run local server

$ cd /path/to/your/newly/created/app/
like
$ cd ~/Dev/appDir/cfe-app/
$ ng serve --open
This will automatically open http://localhost:4200/
note: ng serve command launches the server, watches your files for changes, and rebuilds the app as you save changes

5. Edit project:

  1. Open file in appDir/cfe-app/src/app/app.component.ts:
    import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Hello world!'; }
  2. Save app.component.ts
  3. Within app root, Run:
    ng serve --open
    Or just navigate to http://localhost:4200/
    app root is in /appDir/cfe-app/ for our app,
  4. With ng serve still running, make and save a new change in app.component.ts:
    import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Hi there again!'; }
  5. Open http://localhost:4200/ -- see how it changed automatically? Yup it's almost like magic. Learn how to do this in plain typescript here using webpack.

6. Test build

ng build
This creates a new folder called "/dist/" in your app root which is your entire app compiled and ready to ship.
Great optional flags:
  • --prod this creates a production-ready version of your app
  • --output-path /to/your/path/ this changes the default path for where your Angular files should be built to
  • --output-hashing none Adding this will remove the additional hash on your file name
  • More options are here
Now, run production code locally
$ cd path/to/your/ng/proj
$ ng build --prod --output-hashing none
$ npm install -g http-server
$ cd dist
$ ls 
3rdpartylicenses.txt	inline.bundle.js	styles.bundle.css
favicon.ico		main.bundle.js
index.html		polyfills.bundle.js
$ http-server
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.0.9:8080
Hit CTRL-C to stop the server
Now you can open http://127.0.0.1:8080 or http://192.168.0.9:8080
====

Watch

Below covers v.4 but it's the same process for v5
Discover Posts
Angular Setup, Install, & Build Guide