Build Angular apps using Angular CLI In 5 Minutes [For Developers]


If you’ve gone through the Angular 4 basics and created your first Angular 4 app, you already had built your Angular apps using Angular CLI.

This tool is very useful, especially for developers to create and scaffolding their angular apps easily.

How to build Angular apps using Angular CLI?

Angular CLI is a Command Line Interface, that helps you to build Angular apps using nodejs style. Also, it performs all the tedious tasks that you need while creating an Angular app.

The people who find difficult to perform or scaffolding their apps, this tools is dedicated to them.

And it’s like superpower for an Angular developer because by using Angular CLI they can perform almost everything that requires a developer to perform like create, build, compile, serve, test, etc.

So, let’s start with the details and see how we can scaffold our angular apps using Angular CLI.

Install Angular CLI

You should have npm installed if you’d like to install the Angular CLI.

npm install

Now, install the Angular CLI using npm.

npm install -g @angular/cli

If you’re having any troubles, you can use sudo as well.

sudo npm install -g @angular/cli

You can check the version of installed CLI.

ng version

Updating Angular CLI

To update Angular CLI, you need to remove the previously installed version and then you should remove the cache.

npm uninstall -g @angular/cli
npm cache clean
# if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using --force)
npm install -g @angular/cli@latest

Get help on Angular CLI

ng help

Also, you can get the help on specific command

ng help generate

Create an app Angular app

ng new app-name

Few options,

--dry-runonly output the files created and operations performed, do
not actually create the project.
--verboseoutput more information.
--skip-installDon’t npm install, useful when offline or with slow internet.
--skip-testsDon’t create spec files.
--skip-gitDon’t initialize a git repo.
--source-dirName of the source directory
--routingAdd routing to the app.
--prefixSpecify the prefix to use for components selectors.
--styleDefaults to css, but can be set to scss.
--inline-styleUse inline styles for components instead of separate files.
--inline-templateUse inline templates for components instead of separate files.

Organizing the app by generate

While creating an angular app, you would require creating multiple components, directives, etc, on that point generate keyword will help you to perform these tedious tasks automatically.

ng generate component home

Here, is the list of things that you can generate using ng generate.

Componentng g component my-new-component
Directiveng g directive my-new-directive
Pipeng g pipe my-new-pipe
Serviceng g service my-new-service
Classng g class my-new-class
Guardng g guard my-new-guard
Interfaceng g interface my-new-interface
Enumng g enum my-new-enum
Moduleng g module my-module

Serving your app

Finally, to compile and run your application you’d require serve.

ng serve

You can navigate to http://localhost:4200/ in your browser. The app will automatically reload if you change any of the source files.

Also, you can change the default HTTP host and port where you’d like to run your application.

ng serve --host --port 4201

Running the tests

ng test

Few options,

--watchRetest when some files change.
--code-coverageAdd a coverage report.
--progressShow the progress while running the tests.
--browsersSpecify with browsers to use.
--colorsUse colors in the output or not.

Run Linter on your project

ng lint

Few options,

--fixApply fixes for linting errors.
--forceForce success even when linting fails.

Building Your App

You can build your app using build command.

ng build

Few options,

--targetSpecify the target for the build (e.g.: --target production).
--aotUse ahead of time compilation.
--base-hrefSpecify the base href to use.
--deploy-urlSpecify the deployment url.
--extract-cssPut the global styles in a CSS file instead of keeping it in the JavaScript.
--watchRebuild every-time a file changes.

Moreover, you can go through with the list of Angular CLI commands and it’s options here.

I hope, now you’re ready to create your angular apps using Angular CLI in quick time.

Leave a Reply

Be the First to Comment!

Notify of