Angular 5 with CLI – Quick Guide to Installation and Setup

Angular 5, the latest version of Angular is out now, and developers are excited to try one of the most modern and popular frontend JavaScript frameworks. So here’s a quick guide to installing Angular 5 with CLI on your system. While it’s not a long process, you do need to make sure that you have all the dependencies properly installed. The two prerequisites you need to check for are:

• Node.js with NPM (Node Package Manager)
• Angular-CLI (Command Line Interface)

So, to verify if you have Node.js correctly installed, go to the command line and put in:

node -v

This should tell you the current version of Node installed. If your console doesn’t recognize this command, it means you need to install the latest version of Node.js first.

Once installation is complete, close the command line and reload it again. The node -v command should work now and give you the current version number.

The next step is to install Angular-CLI. This tool is what helps you create Angular projects and makes other development tasks easier.

So in the command line, type:

npm install -g @angular/cli

After installation, type:

ng -v

The output screen will look somewhat like this:

Now it’s time to start a new ng5 project. Navigate to the right path, and type:

cd wamp64/www/

And create the new project now.

ng new angular5demo



Navigate to the project and rev up the local server

cd wamp64/www/angular5demo

Open your projects

$ ng serve --open

If it doesn’t open automatically then open http://localhost:4200/

*note: ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files*

Edit project:

• Open file in/angular5demo/src/app/app.component.ts:

• Save app.component.ts
• With ng serve still running, make and save a new change in app.component.ts:

• Open http://localhost:4200/ — notice how it changed automatically.

Test build

ng build

This will create a new folder called “/dist/” in the app root. So that’s it. The new Angular 5 app is now compiled and ready for shipping. Now you too can install Angular 5 with CLI in no time, and create awesome apps. Happy coding.

Read also:How to Set Up a Node.js Application for Production with Nginx Reverse Proxy