Before getting started using angular framework , we need to have multiples prerequisites installed in our machine.
In this Tutorial we will see how to install angular Environment correctly in 3 Steps, by installing all the requited tools.
Note: If you don’t want to install Angular environment locally, but you still want to try the code in this Complete Angular Tutorial, you can easily use the online IDE for Front-End Development called Stackblitz that you can use to create your Angular project compatible with Angular Command-line interface (CLI)
Install Angular Environment : Why we need NodeJS ?
When we use Angular, we will never be coding in Node.js, Angular just uses Node.js as its base for a multiples parts of its build environment. It’s also required by the Angular Command-line interface.
So, to get started with Angular Framework, and correctly install Angular environment, you will need to have Node.js installed on your machine.
Like any other Tool, There are always multiple ways to install it, so please check the official Node.js Download Page for more instructions.
I recommend installing NodeJs using the Node Version Manager called NVM3 (we will see how to use it in the next Tutorials ) , it is a simple bash script that allows us to manage multiple active NodeJs versions.
Note : if you are using macOS, you would probably find some issues when installing Node.js through Homebrew. So I recommend installing it directly if you run into any problems.
You need to install at least version 6.9.0 of Node.js, and version 3.0.0 or above of NPM.
You can always check your node versions after installing by using the following commands:
node --version
npm --v
How To Install TypeScript ?
TypeScript adds multiples new types to our JavaScript code, it allows writing JavaScript that is easier to understand.
Even when you write using Typescript, your final project code will be complied and converted to JavaScript that can run easily in any environment, because the browser don’t recognize the Typescript code.
Using TypeScript is not necessary for developing an Angular project, but it is highly recommended, as it offers multiples features that do not exist in JavaScript.
Note that we will not be using the JavaScript in our Angular Tutorial, we will be using only TypeScript.
We are in the Second Step, so, to install angular environment we need to install TypeScript, and we can do that through the Node package manager (NPM), by running the following command:
npm install -g typescript
Remember to install at least version 2.4.0 or above.
In our Angular Course, we will be covering most of the basic features and concepts of TypeScript, but it’s recommended to check the official TypeScript documentation to learn the advanced Features and concepts of TypeScript.
Install Angular Environment : What is Angular CLI ?
When we use AngularJS, it is easy to source the files as dependencies and be up and running, meanwhile Angular has a pretty more complicated setup.
That’s why, the Angular team has created a magic tool called CLI (Command-line interface) to make it easier to develop and bootstrap your Angular applications.
While the CLI tool helps to make the process of development easier, It is highly recommended using it from the start to the end of your projects.
In our Complete Angular Course, we will cover multiples CLI command as well as the actions it performs underneath,
we are in the final Step, so, to install angular environment completely I recommend installing the latest version of Angular CLI by running the following command:
npm install -g @angular/cli@latest
You can check your Angular CLI version after installing by using the following command :
ng version
//or
ng --version
We are done ! Congratulation, you have installed your Angular Environment and can dive deeper now by creating your first Angular Project. See you in the next Tutorial.
Troubleshoot
Problem 2 : fsevents@^1.0.0 error when installing angular CLI using npm
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0
(node_modules\@angular\cli\node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
fsevents@1.2.4: wanted {"os":"darwin","arch":"any"}
(current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.1.2 (node_modules\@angular\cli\node_modules\watchpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.1.2 (node_modules\@angular\cli\node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: node-sass@4.9.0 (node_modules\@angular\cli\node_modules\node-sass):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: node-sass@4.9.0 postinstall: `node scripts/build.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1Solution 1 : try to use the audit fix of the npm using this command (–force is optional ):
npm audit fix –force
Solution 2 : update your npm version using this command :
npm install -g npm@latest