Get started with Angular

This is a short introduction to help you set up and get started with Angular.
(Please tell me if you find any errors or omissions in the document —Upsorn Praphamontripong, 26-July-2020)

Set up Node.js

  1. Download the Latest LTS Version: 12.18.3 (includes npm 6.14.6) or higher from https://nodejs.org/en/download/.   Then, open the downloaded file to install Node.js (Angular 10 requires Node.js version LTS or later)
  2. Verify the installed versions, using a terminal, and type
    • node -v
      [if installed correctly, you should see the version of Node.js you installed, should be 12.x.x or higher]
    • npm -v
      [if installed correctly, you should see the version of npm you installed, should be 6.14.6 or higher]

Install Angular

  1. Use a terminal, run the following command line
    npm install -g @angular/cli
  2. Verify that the ng command works as expected by running
    ng --version
    [you should see a screen similar to the following — showing Angular CLI with versions]

    image showing Angular version

Some troubleshooting

If running ng --version results in a message "bash /usr/bin/ng: No such file or directory in Angular", it is possible that you install Angular (running the npm install -g @angular/cli command) with root. Try to remove angular-cli and then reinstall

sudo npm remove -g @angular/cli
sudo npm install -g @angular/cli

If the ng command still cannot be found, try setting alias. Be sure to use the correct path where your ng is installed. (the paths where the ng is installed can be found when running the sudo npm install -g @angular/cli command).

image showing path where ng is installed

(Note: the sample image is from a Mac user.)

Suppose your node.js version is v14.6.0. To set an alias, use the following setting:

alias ng="/path-to/.nvm/versions/node/v14.6.0/bin/ng"

Note: while we are working on Angular 10, most of what we do work the same with Angular 8 and 9.

Angular is written in and makes use of TypeScript (which is a superset of JavaScript that adds types). To get the biggest benefit from TypeScript, you are recommended to use a code editor that support TypeScript. There are TypeScript plugins for most editors

  • Visual Studio Code (free and open source editor by Microsoft, which is the company behind TypeScript)
  • Eclipse's TypeScript-IDE or Angular IDE plugins (they seem to be better than other Eclipse's TypeScript plugins as of now)

Alternatively, PhpStorm also works well with Angular and TypeScript.


First Angular program

  1. Create a new Angular app
    Use a terminal, navigate the the workspace directory where you want to work on the app.
    • Create a directory
      mkdir angular-summer20
    • Go inside the directory
      cd angular-summer20
    • Use an ng new command to create a folder with the app name
      ng new angular-example
    • Configure dependencies by answering Y to the question about generating a routing module
    • Select CSS for the stylesheet format (if applicable)
    Note: Let's go inside the angular-example directory and see what has been created.
  2. Start the server
    • Use a terminal, navigate to the workspace directory
      cd angular-example
    • Start the development / deployment server
      ng serve
      This command will compiles and builds all files, and then starts the server.
  3. Access the app
    • Open a web browser, enter a URL
      http://localhost:4200
      Note: node.js server runs on port 4200, by default.

    You should see a screen similar to the following

    screen showing Angular default example

  4. To shutdown the server
    • Use a terminal, press keyboard Ctrl+c