15 Aug

How to start Angularjs 4 with Angular CLI


Angular CLI is a command line interface to use Angularjs. We can create any type of Angular apps easily with the help of Angular CLI.

How to start Installation?
Here we are going to use Node.js command prompt.

Start Node.js command prompt & Follow these commands in Node.js command prompt.

install angular cli

> npm install -g @angular/cli

for latest version :

> npm install -g @angular/cli@latest


Angular CLI makes it easy to create a new application.

Angular CLI - create a new app

> ng new hello-world
> cd hello-world

Angular CLI - new app created


Check the version you have installed :

> ng --version


> ng -v

“ng –version” or “ng –v” command will show installed version details like this :

Angular CLI - version

@angular-cli: 1.3.0
node: 8.2.1
@angular/common: 4.3.4


How to run our new app in a web browser
Easily start running our new app in ‘webpack-dev-server server’. It is only for development with live reload.

Angular CLI ng serve


> ng serve

Angular CLI ng serve-compiled

angular cli app in a web browser:

run angular cli app in a web browser

The app will automatically reload if you are changing something in any file. “http://localhost:4200” this is a default angular cli app URL. Open this URL in any browser. The app will start working.

How to change angular cli server port number or host instead of “localhost:4200”
We can configure it manually in our “angular-cli.json” file, which is locating in our project directory.

"serve": {
            "port": 5500,
            "host" : ""       

Restart the server. It will serve in the new port or host as per update.

” Angular is running in the development mode. Call enableProdMode() to enable the production mode. ” It is a default console message.
We can update environment to production mode.
change production: false to true in environments/environment.ts

export const environment = {
	production: true


Project’s unit testing.
‘hello-world\src\app’ folder have app.component.spec.ts file. That file has unit test configurations.

Angular CLI - test

Test Debug page :

Angular CLI - test debug

> ng test


Create compiled and minified application :
Compiled and minified application will get generated in a new ‘dist’ directory by default. “ng serve” is not required to run “ng > build”.

> ng build

Build compiled and minified version for production :

 compiled and minified application in dist folder

> ng build --target=production


> ng build --prod

How to generate Angular components in CLI

Angular CLI create component

> ng g component sample-component-name

It will generate new component folder “sample-component-name” with all related files in the src\app directory.

How to stop running node server
Node.js command prompt – Press -C twice or type ‘exit’ to stop node server.
Node.js – Press -D

"[WDS] Disconnected!"

This message will come to browser console if ‘webpack-dev-server’ is not working or stopped running server manually.

Follow me

About Sanju

I’m Sanjunath.S from Mumbai, India. I like web technologies, traveling & history. I have 11+ years of experience in web technologies like HTML 5, CSS 3, JavaScript, Bootstrap, and PHP.

Pay with PayPal
Translate »