ANGULAR FOR EVERYONE: PART 00
How to create a new Angular project?
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 as IDE for professional developments, and sometimes I use StackBlitz, 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. 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 is the official documentation.
Step 2: angular/cli
In a terminal, just run this command: npm install -g @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
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
- ng serve — open
That will open a window in your default browser with this URL: http://localhost:4200/
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.
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 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.
Top comments (0)