Angular apps require Node and npm to be installed locally. In this post, lets learn how to set up the development environment to build awesome Angular apps. Most tutorials start with installing Angular CLI but for developers like me who come from Microsoft background, even Node and NPM are strangers. So, lets start from the very basics.
Please note that the Angular team has decided to drop “2” from the name. So, this superherioc framework is now called Angular instead of Angular 2.
You would need the following setup:
- Node Package Manager (NPM)
- VisualStudio Code
- Chrome Browser
Step 1: Install Node.js
You might be thinking why we need Node.js? Well, Node.js helps in transpiling our .ts files to into .js files. Having Node.js also helps in serving our Angular app from a “real” albeit light web server. Now that we have got Node.js installed, lets move on to Node Packet Manager.
Step 2: Node Package manager (NPM)
Node JS package manager, helps us to manage all the libraries that our software relays on. Node comes with npm installed so, we should have a version of npm. However, npm gets updated more frequently than Node does, so we may want to make sure it’s the latest version. To do that, open the terminal on mac or command prompt on windows and type the following:
node –v to check node version
npm –v to check npm version
That should display the versions of Node and npm installed on your machine. Make sure you have node.js version 5+ and npm version 3+.
Step 3: Install Visual Studio Code
VisualStudio Code is optimized for building and debugging modern web applications. Visual Studio Code is free and available for both Mac and Windows.
There are other code editors that you could use like WebStorm, Sublime, Atom, IntelliJ, etc., but, most Angular developers prefer VS Code. Visual Studio Code supports TypeScript with intellisense, syntax colorization, highlighting, and bracket matching.
To install Visual Studio Code, head over to https://code.visualstudio.com/, download the installer file and follow the instructions.
Step 3: Install Chrome
You can use any browser but it is highly recommend using Chrome as it comes with excellent Developer Tools.
I have also created a YouTube channel with tutorials on Angular. If you like the videos, please hit like and subscribe to my channel.
Okay! So with all of this set up, you can now start creating your first Angular App.
The following posts will help you in creating your first Angular App.