# Set up Angular

# Step 1 - install node and npm

you can always run node -v and npm -v in your terminal to see if you have already installed node and npm.

# Step 2 - install Angular CLI

To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

then you can run ng version to see if you have successfully installed angular cli.

# Error

Below is the error message that I have after I install angular cli

Warning: The current version of Node (18.7.0) is not supported by Angular.

This version of Angular just got released, and my node version was 18.7.0 which is not supported by the Angular.

Angular CLI: 14.1.2
Node: 18.7.0 (Unsupported)
Package Manager: npm 8.15.0
OS: darwin arm64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1401.2 (cli-only)
@angular-devkit/core         14.1.2 (cli-only)
@angular-devkit/schematics   14.1.2 (cli-only)
@schematics/angular          14.1.2 (cli-only)

Warning: The current version of Node (18.7.0) is not supported by Angular.

# What version of npm and node does Angular support?

according to Releases | Node.js (nodejs.org), Production applications should only use Active LTS or Maintenance LTS releases.

So as you can see from the above screenshot, my version of Node 18.7.0 is not either Active or MAINTENANCE in this month (Aug 2022). What I need to do is to downgrade node to version 14 or 16.

# Downgrade Node using homebrew

I used homebrew to install node.js before, so I downgrade node using brew.

To downgrade node, follow the steps in this article: Downgrade Node using Brew on MacOS - Chris Moore

Now, when you run ng version , it should work.

Node: 16.16.0
Package Manager: npm 8.11.0
OS: darwin arm64

# Step 3 - create your project

# 1. Cd down to the folder of your project

in terminal:
angular-spring-todo-app is the name of the directory you’ve created)

cd angular-spring-todo-app

# 2. Create Angular Project

todo-app : The project name that I want to create

ng new todo-app

Then you will get this messgae:

? Would you like to add Angular routing? (y/N)

Would you like to have multiple screens? yes, then press y.

Then you will get this:
(I choose CSS to keep everythig simple)

? Which stylesheet format would you like to use?

❯ CSS

  SCSS   [ <https://sass-lang.com/documentation/syntax#scss>                ]

  Sass   [ <https://sass-lang.com/documentation/syntax#the-indented-syntax> ]

  Less   [ <http://lesscss.org>                                             ]

Then it starts installing the packages for you, if this is your first time to create an angular project, this process may be a little bit slow for you.

you will get a message if you successfully install:

✔ Packages installed successfully.

    Directory is already under version control. Skipping initialization of git.

now if you run ls in terminal, you will see a todo-app in your folder

tiffanyiong@Tiffanys-MacBook-Air angular-spring-todo-app % ls

todo-app

tiffanyiong@Tiffanys-MacBook-Air angular-spring-todo-app % cd todo-app

tiffanyiong@Tiffanys-MacBook-Air todo-app % ls

README.md		karma.conf.js		package-lock.json	src			tsconfig.json

angular.json		node_modules		package.json		tsconfig.app.json	tsconfig.spec.json

tiffanyiong@Tiffanys-MacBook-Air todo-app %

# 3. run the application

in todo-app folder, run ng serve command.
now you can see that todo-app is running on http://localhost:4200/

Now go to http://localhost:4200/ and you will see your app is running