Angular Fundamentals
  • Angular Fundamentals
  • Introduction to Angular
  • Development Environment Setup
  • TypeScript
  • Angular Components
  • Data Binding
  • Event Handling
  • Directives
  • Structural Directives
  • Template Driven Forms
  • Reactive Forms
  • Angular Modules
  • Angular Services
  • HttpClient
  • Pipes
  • Angular Router
Powered by GitBook
On this page
  • Node.js
  • How do I get it? (Windows Users)
  • Check Node and NPM versions
  • Installing packages
  • Dependencies vs DevDependencies
  • Global vs Local Packages
  • Manually Adding dependencies
  • Semantic Version
  • Updating and removing packages
  • Angular CLI
  • Creating new projects
  • Dev Web Server
  • Proxy Setup
  • Code Editors

Development Environment Setup

PreviousIntroduction to AngularNextTypeScript

Last updated 5 years ago

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)

Download the installer and follow the installer instructions

Pro Tip: Mac/Linux users - Use NVM - Node Version Manager -

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

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

https://nodejs.org/en/download/
https://github.com/creationix/nvm
https://angular.io/cli