Angular 5: Intallation and configuration with Angular CLI
Hi Guys,
In this blog, I am sharing how one can easily install angular (version 5.2.0). Angular 6 beta is out till date, which is not yet stable. Most of developers are excited to try one of the most modern and powerful frontend JS framework. Here is the quick guide to install angular 5 with CLI on development environment. I am choosing a stable version of Angular (5.2.0) for installation purpose in this blog.
Lucky, if you are familiar with Angular 2 or 4 and have good experience with it, the process of starting a new Angular 5 project is pretty much the same.
However, if you are new to angular and not having previous experience with Angular, don't worry -- installing Angular 5 is like a breeze. Let's get started.
Pre-requisites: Here are the list of tools which you require before proceeding.
To check whether or not you have both of these installed, visiting your commend line(Win + R => cmd) or console and type following commands:
These commands should tell latest versions of Node and NPM installed on your system. For me these two versions are: node version is "v8.9.4" and npm version is "5.6.0". If either of these commands are unrecognized, visit the downloads section of Nodejs.org and download/run the appropriate installer based on your OS.
Follow through the installation steps with default settings, which will install NPM by default. Once finished, reload your command line / console and retype the above commands -- they should now give you version numbers.
NOTE: In case you are working offline, it is hard to get/download packages unless you are connected to internet or some local package manager. In order to install/configure custom local package manager execute following command with change of local URL:
Installing Angular CLI:
The Angular CLI makes it easy to create an application that already works, right out of the box. It requires Node 4 or higher and npm 3 or higher. Now if you are successfully installed node and NPM next step is to install Angular CLI.
This command might take some time as it installs all the dependencies related to CLI and packages. Once CLI is installed you can verify and check the version by executing this command:
The output screen will look somewhat like this:
My version of CLI is 1.6.6. Great, That's it. We are ready to start our first angular application. Here is the command to create a base project using CLI:
The style flag is provided in case we want to use SASS compiler for creating CSS, and another flag --routing is used to provide us with the routing scaffolding.
It will take several minutes depending upon internet connection. Once completed it will show following message:
So its all done! Now on the command prompt navigate into the new project folder. To do that, simply type:
To serve your project in the browser, which is useful for development as it automatically compiles your project and reloads it in the browser, type:
And that's it! You have a fresh copy of Angular 5 ready and waiting for you to develop.
Happy Angular Coding :)
In this blog, I am sharing how one can easily install angular (version 5.2.0). Angular 6 beta is out till date, which is not yet stable. Most of developers are excited to try one of the most modern and powerful frontend JS framework. Here is the quick guide to install angular 5 with CLI on development environment. I am choosing a stable version of Angular (5.2.0) for installation purpose in this blog.
Lucky, if you are familiar with Angular 2 or 4 and have good experience with it, the process of starting a new Angular 5 project is pretty much the same.
However, if you are new to angular and not having previous experience with Angular, don't worry -- installing Angular 5 is like a breeze. Let's get started.
Pre-requisites: Here are the list of tools which you require before proceeding.
To check whether or not you have both of these installed, visiting your commend line(Win + R => cmd) or console and type following commands:
node -v
npm -v
These commands should tell latest versions of Node and NPM installed on your system. For me these two versions are: node version is "v8.9.4" and npm version is "5.6.0". If either of these commands are unrecognized, visit the downloads section of Nodejs.org and download/run the appropriate installer based on your OS.
Follow through the installation steps with default settings, which will install NPM by default. Once finished, reload your command line / console and retype the above commands -- they should now give you version numbers.
NOTE: In case you are working offline, it is hard to get/download packages unless you are connected to internet or some local package manager. In order to install/configure custom local package manager execute following command with change of local URL:
npm config set registry "<URL of package manager URL>"
Installing Angular CLI:
The Angular CLI makes it easy to create an application that already works, right out of the box. It requires Node 4 or higher and npm 3 or higher. Now if you are successfully installed node and NPM next step is to install Angular CLI.
PS > npm install -g @angular/cli@latest
This command might take some time as it installs all the dependencies related to CLI and packages. Once CLI is installed you can verify and check the version by executing this command:
PS > ng -v
The output screen will look somewhat like this:
My version of CLI is 1.6.6. Great, That's it. We are ready to start our first angular application. Here is the command to create a base project using CLI:
PS > ng new my-first-angular-proj --style=scss --routing
The style flag is provided in case we want to use SASS compiler for creating CSS, and another flag --routing is used to provide us with the routing scaffolding.
It will take several minutes depending upon internet connection. Once completed it will show following message:
So its all done! Now on the command prompt navigate into the new project folder. To do that, simply type:
PS > cd my-first-angular-proj To serve your project in the browser, which is useful for development as it automatically compiles your project and reloads it in the browser, type:
PS > ng server
And that's it! You have a fresh copy of Angular 5 ready and waiting for you to develop.
Happy Angular Coding :)
Comments
Post a Comment