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, 25-March-2021)

Set up Node.js

  1. The best way to install Node.js is to install it directly from the Node.js website. Download the Latest LTS Version (14.16.0 which includes npm 6.14.11) from https://nodejs.org/en/download/.   Then, open the downloaded file to install Node.js

    Note: For Spring 2021, we will use Angular 11, which requires Node.js version 12.2.0 or higher. (You may use Angular 10, which requires Node.js version 12.2.0 or higher) .

    Alternatively, for Mac users, you may use a terminal and then run the following command (not recommended as it is known to cause some issues).

    brew install node
  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]

    The Node Package Manager (npm) is installed as a part of Node.js. To check if npm is available, use a terminal and type

    npm -v    [if installed correctly, you should see the version of npm you installed]

    If the npm version number is not displayed and/or an error occurs, make sure to download a Node.js installer that includes npm. Your npm version should be 6.9.0 or higher.

If you already have node.js on your machine, you may update all packages to a new major version by running the following command to install the npm-check-updates package.

npm install -g npm-check-updates

Install Angular

The following describes steps needed to install Angular, assuming that no previous version of Angular is available on your machine. If you already have a previous version of Angular on your machine, you may refer to Angular update guide to update to the new version.

  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 11, most of what we do work the same with Angular 10, 9, and 8.

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.

Do you have to use TypeScript? No. Although Angular is written in TypeScript, you do not have to use TypeScript to use Angular. Due to the time constraint, we are not going to talk about TypeScript in depth in this course. For more information, please refer to https://www.typescriptlang.org/.


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-s21
    • Go inside the directory
      cd angular-s21
    • 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: This will run for a while. Let's go inside the angular-example directory and see what has been created.

    Some troubleshooting:
    If running ng new angular-example results in "the schematic workflow failed" error, it is possible that your system did not install npm properly because some libraries may be missing. As a result, your system has corrupted the npm and node module. Try running the following steps:

    1. npm cache clean --force to clean the npm memory
    2. npm uninstall -g @angular/cli to uninstall Angular, then
    3. npm install –g @angular/cli or npm install –g @angular/cli@latest to install Angular.

  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.

    Some troubleshooting

    If you get the message "Port 4200 is already in use. Use '--port' to specify a different port", this means that you already have another service running on port 4200. If this is the case you can either

    • Shut down the other service, or
    • Use the --port flag when running ng serve to change the port:
      ng serve --port 9001
      As a result, the URL will be http://localhost:9001

    Note that, on some machines, the domain localhost may not work. When you run ng serve, you may see an IP address or a URL the server is running on. Be sure to read the messages on your machine to find your exact development URL.

  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