Creating a New Angular Project
Tags: angularcli, projects, creation, angular
Published: 2021-09-15 13:34:03

---
title: Creating a New Angular Project
published: true
date: 2021-08-21 12:31:27 UTC
tags: angularcli,projects,creation,angular
canonical_url: https://medium.com/@redin.gaetan/angular-for-every-one-chapter-0-c234ce982187
---

#### ANGULAR FOR EVERYONE: PART 00

#### How to create a new Angular project?

![](https://cdn-images-1.medium.com/max/1024/1*puxEM436yWsEh8Qcj32O2Q.jpeg)

To be able to code an Angular application, we need to install some tools before. I will try to define an easy guideline to follow.

I use [IntelliJ](https://www.jetbrains.com/fr-fr/idea/) as IDE for professional developments, and sometimes I use [StackBlitz](https://stackblitz.com/), an online editor. Both simplified the project creation, and if you use it, you don’t need to follow the steps below. But maybe it could be interesting to have an overview of the installation process for an Angular project.

### Step 1: Node.js & npm

#### Method 1: Classic way

First, we need to install _Node.js_. It is a JavaScript runtime that you can download [here](https://nodejs.org/en/download/). You should always prefer an active LTS version (which is required by Angular).

npm is provided when you install Node.js. To verify, you can run node -v and npm -v in a terminal, and you will see the current version for each one.

#### Method 2: nvm

I use this method. Why? Because I can work on several projects which don’t have the same version of Node.js. That isn’t very pleasant to handle which version of Node.js to use. Thanks to nvm, I can install all versions I want and just switch on the version I need.

[Here](https://github.com/nvm-sh/nvm) is the official documentation.

### Step 2: angular/cli

In a terminal, just run this command: npm install -g [@angular/cli](http://twitter.com/angular/cli)

You will use it to create projects and generate code for your applications, libraries.

### Step 3: create a new project

In a terminal, you must run: ng new <app\_name>

You will be prompt for information about features to include in the initial app. If you are not sure about a feature, you can say no it will still be reversible later. I prefer not to include what I don’t need now, and it allows you to avoid dead code in your application. The list of features below (I said “Y” and then “CSS”):

- Would you like to add Angular routing?
- Which stylesheet format would you like to use? (CSS, SCSS, Sass, Less, Stylus)

That’s all your project is created and ready to be launched. Just run:

- cd <app\_name>
- ng serve — open

That will open a window in your default browser with this URL: [http://localhost:4200/](http://localhost:4200/)

![](https://cdn-images-1.medium.com/max/1024/1*h02VY94gw96oJUlVKoRUnw.png)

### Bonus

#### ng new options

Some options can help create your project and could avoid having some refactor later.

- — minimal Create a workspace without any testing frameworks. As I’m sure you always test your code, I assume this can be used for learning purposes.
- — prefix The prefix to apply to generated selectors for the initial project. Default is “app.”
- — strict Enables stricter type checking and stricter bundle budgets settings. I recommend it.

There are a lot of others options described [here](https://angular.io/cli/new).

### I made a mistake, and I wanted SCSS rather than CSS

Don’t worry, and it’s never too late. Run this command to update the schematics stylesheet option:

ng config schematics.@schematics/angular:component.stylesheet SCSS

and think to rename your \*.css files into \*.scss. It would be best if you also renamed the reference of styles.css into angular.json.

#### Angular CLI commands list.

[Here](http://ng%20config%20schematics.@schematics/angular:component.stylesheet%20scss) is the list of all CLI commands.

#### tsLint to esLint

Run the following commands:

- ng add @angular-eslint/schematics
- ng g @angular-eslint/schematics:convert-tslint-to-eslint

Remove the tslint.json file.

### Conclusion

Most of the IDEs facilitate the creation of Angular projects now. But understanding this part and investigate it will make you better and help you make better decisions from the design of your projects.

If you have any questions, don’t hesitate. Thanks for reading.

### Learn More

[Angular for everyone: All about it](https://link.medium.com/SXPQgRn7xjb)