S. J. Lewis 365 Solutions

Angular 2: Quick Start Notes Part #2

Following my first post in this series, in which I set up Visual Studio Code, installed Git and cloned Deborah Kurta’s Angular2-GettingStarted.git. Today I’m going list the steps required to install and configure the NPM (Node Package Manager) command line utility; this will enable me to see the results of my code changes in a web browser as I make them.

Before we start you should have already installed:

Install NPM

Start by installing the Node Package Manager know as NPM:

Setting up and Angular 2 Application

These are some different options for setting up an Angular 2 Application, however as I’m following Deborah’s course I have chosen to use her start files:

Install NPM: Macintosh (OS X)

Having previously cloned a Git repository we need to run the “npm install” command to install all of the required libraries (e.g. Angular and TypeScript) into our Application:

  • Open VS Code (Visual Studio Code)
  • Open the your Angular 2 project (in my case this project is called APM)
  • Right click on a file in the root of the folder and click Open in Terminal
  • Enter the following command: 
Mac:GitHub sion$ npm install

If output ends in an error, try the command again as it will often complete successfully on the second attempt.

For more NPM commands such as npn rebuild | uninstall see: https://docs.npmjs.com/cli

Running the Angular 2 Application: Macintosh (OS X)

These steps are to be repeated every time I start up our machine and want to work with my Angular 2 project. The “npm start” commands starts the “lite-server” (file server), runs the TSC (TypeScript Compiler) in watch mode and opens a browser window loading the Angular 2 Application.

  • Open VS Code (Visual Studio Code)
  • Open your Angular 2 project (in my case this project is called APM)
  • Right click on a file in the root of the folder and click Open in Terminal
  • Enter the following command: 
Mac:GitHub sion$ npm start

Siôn Lewis

, ,
, , , , , , , ,