What and Why Angular CLI (Command Line Interface)

Angular CLI

April 28, 2018

  • Angular CLI is command line for creating an angular application
  • This tool provides all the features and as well as commands to create the angular apps in an easy way.
  • Eases your angular development process
  • It will make your development process easy and thus you can reduce the development lifecycle
  • When you install Angular CLI tool and create the project, it creates entire project development environment automatically.
  • It provides you the basic necessary files that involve in code development process.
  • When you create the project with the help of angular CLI tool, it will auto-configure your project. No need for manual configuration to set up the project.
  • Overall it will reduce the development task and hence you can complete the project in the very fast manner and easy to work with the project.


What is Webpack?

  • Webpack is a module bundler for JavaScript applications and also we can it as a build tool
  • A bundler is a software that bundles your application code along with its resources into a minimized, zipped bundle that can be easily deployed on the server
  • Bundler is software, to bundle the code and in a form of zipped format.
  • Module bundling is the process of converting code into a pure JavaScript file along with their dependencies by scanning import statement into the minimized format. Hence we can deploy on a server very easy manner

How does it work?



   var cats = [‘dave’, ‘henry’, ‘martha’];

   module.exports = cats;

  • Webpack will read the entry point very first and scan the entire files through import statement, analyze its dependencies


  cats = require(‘./cats.js’);

  Q console.log(cats);

  • Webpack bundle the entry point file and all dependent file with their dependencies into a single JS file

Core Concepts

  • Entry
  • Output
  • Loaders
  • Plugins

Configuration Setup

  • Step 1:create your project folder
  • Step 2: package.json -> npm init –y​​
  • Step 2: Install webpack ->npm i -S webpack
  • Step​​ 3: Install Webpack CLI ->npmi -D webpack-cli


1.Sass Loader

                         npm install css-loader sass-loader –save-dev

2.Babel Loader

                         npm install –save-dev babel-loader babel-core

3.Css Loader

                         npm install –save-dev css-loader

4.ts Loader

                         npm install –save-dev ts-loader


Webpack-dev-server (WDS)

  • web-server to serve our application locally on some port on localhost.
  • WDS sever will serve the applications local machines
  • It will create build at the memory and uses the build for serve from memory directly
  • npm install web pack-dev-server –save-dev
  • npm install HTML-web pack-plugin

You May Also Like…

Java 10- Features And Enhancement

Java 10- Features And Enhancement

Java 10 is out !!! As we, all know oracle has switched from a feature-driven release model to a time-based release...