Development Environment Setup

Node.js

Node.js is an open source server environment that runs on multiple platforms (Windows, Linux, Mac OS X, etc) and uses JavaScript on the server. It includes npm, which we need for installing packages/dependencies.

How do I get it? (Windows Users)

https://nodejs.org/en/download/

Download the installer and follow the installer instructions

Pro Tip: Mac/Linux users - Use NVM - Node Version Manager - https://github.com/creationix/nvm

Check Node and NPM versions

node -v

npm -v

Installing packages

npm install luxon

If package.json doesn't exist you will need to create the file using:

npm init

Dependencies vs DevDependencies

npm install jest --save-dev

Global vs Local Packages

Packages are installed locally (in current folder)

npm i @angular/cli -g

Global packages are available from any folder and are installed in:

• Windows

  • C:\Users{username}\AppData\Roaming\npm

• Mac

  • /usr/local/lib/node_modules

Packages like @angular/cli need to be installed globally so we can create new projects in new folders. During the project creation process, it will also install @angular/cli locally.

Manually Adding dependencies

You can edit the package.json directly and add dependencies to the file. To install all the dependencies in package.json at once, run: npm install

Semantic Version

NPM uses semantic versioning to indicate major, minor, and patch releases

{
    "@angular/core": "^8.1.2",
}

• Exact Version

  • 8.1.2

• Latest Patch

  • 8.1

  • 8.1.x

  • ~8.1.2

• Latest Minor

  • 8

  • 8.x

  • ^8.1.2

• Latest Major

  • *

Updating and removing packages

• Remove packages: npm uninstall @angular/core

• Find outdated packages: npm outdated

• Update outdated packages: npm update

Angular CLI

• Command line interface for creating new Angular projects

• Can generate Angular code for components, services, directives, modules, etc.

• Standardizes build and deploy

• Sets up unit and E2E testing

• Makes new project setup a breeze

Creating new projects

ng new my-project

Pro Tip: Use ng init my-project to create a new project in the existing folder

Optional Flags

• --createApplication false set to true by default, creates a new initial app in the src directory. When set to false, creates an empty workspace with no initial app. Ideal for App/Lib workspaces

• --dry-run shows an output of what would be created

• --minimal skips creating tests

• --prefix prefix the prefix automatically added to generated component selectors (default is "app-")

• --routing adds routing to the project

• --skip-install skips the npm install process

• --skip-git false sets project up for git and includes .gitignore file

• --verbose generates project with verbose output

As of @angular/cli v7, ng new includes cli prompts for including routing and choosing css or a preprocessor

https://angular.io/cli

Dev Web Server

The Angular CLI has a build in dev server that will serve your application.

• Watches for changes and rebuilds your application

• Refreshes browser with new changes

• Can proxy requests to external APIs

• Use ng serve to build and serve your application

• Use ng serve --ssl to enable SSL

• Use ng serve --live-reload false to disable live reload

Pro Tip: Create a proxy.conf.json to proxy calls to external APIs and avoid the headache of CORS or proxy setups.

Proxy Setup

proxy.conf.json

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

angular.json

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

Code Editors

VS Code	Free
WebStorm	Subscription
Atom	Free
Sublime	One time cost
VIM	Free