AngularJS (38 Blogs) Become a Certified Professional

A Complete Guide To The Angular CLI

Published on Sep 30,2019 175 Views
5 / 14 Blog from Introduction to Angular

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

The experience provided by a graphical user interface or GUI is considered to be interactive but plagued with performance issues. This has lead to people who prefer performance over visuals, to use a command-line interface or a CLI. In this article, we will be discussing the command line interface that comes along with Angular, i.e the angular-CLI. We will be going over the following topics in this blog:

Introduction to the Angular CLI

cli icon - angular cli - edurekaWhen Google released AngularJS, it was widely accepted but it still had a long way to go, in terms of functionality. This was solved when AngularJS was re-written completely and named Angular. They removed the ‘js’ postfix because Angular shifted to TypeScript. Along with a new base language, developers were also gifted with the Angular-CLI.

The Angular-CLI is a boon to developers, both new and old, in a lot of ways. It helps them to create Angular applications that work with just a single command. The CLI also manages project configuration, file generation, and build processes to make the development workflow much more streamlined and consistent across Angular applications. Let’s take a look at how we can install the Angular-CLI and make use of its various functionalities.

Angular-CLI Installation

The angular-CLI can be installed using the node package manager i.e. NPM. Make sure you have nodeJS installed with the correct path set. If you don’t know how to do that, you could refer to our nodeJS installation blog. Now, once you have everything set up, go ahead and type the following command in your windows CLI:


npm install -g @angular/cli

This command will install the Angular-CLI globally on your system. Now you can go ahead and start using some basic angular-CLI commands. Let’s say we want to create our project. You can do that using the following command:


ng new first-app

Notice how the command starts with ng. Here ng stands for angular and all the commands pertaining to the Angular-CLI begin with ng. You can now navigate into your project with the following code:


cd first-app

Whenever you create a project using the Angular-CLI, you will get a premade project to start you off. You can view this project by locally serving the application by using the following command.


ng serve

This will serve the project at port number 4200 and will allow you to view it by visiting localhost:4200 in your browser. You can even order angular to open the browser up for you by using the –open flag.


ng --open serve

This will open up the project on the default browser of your system.

Generation and Aliases 

Once you’ve made your project, you would find yourself needing components to help in your project. The Angular-CLI can help you with that too. You can generate component files using:


ng generate component first-component

You can also use some short-hand with the Angular-CLI. For example, if you want to create the same component you could use the following code.


ng g c first-component

You can also generate directives and other aliases. Here’s an example –


ng g d first-directive

Here the stands for directive. Let’s take a look at routing now.

Routing with Angular-CLI

If you generate a new project with the CLI, you’ll be up and running in no time but the default settings are very basic. A side effect of these default settings is that there’s no structure in place for an application with routing for separate views which is a common requirement for modern web applications.

You can always add routing to your project manually by adding a simple flag when creating your application, the CLI can do all of this for you.

When creating a new project, simply add the  – routing flag and the CLI will generate a routing module for your project in src/app/app-routing.module.ts:


ng new my-project --routing

Later on, when you’re developing modules for your application, you can also generate separate routing modules, which is useful when you want to avoid cluttering the root app routing module. Once again, you use the same – routing flag when generating modules.


ng generate module my-module --routing

Styling Preprocessors Using Angular-CLI

When generating your Angular projects, you may choose to use a CSS preprocessor for your style files so you can write your CSS styles using SASS, LESS, or Stylus. Thankfully, the CLI makes this very easy to do by adding the – style flag to the ng new command. Let’s take a look at the command –


ng new my-project --style=scss

If you’d like to use a different preprocessor, simply replace SCSS with less or preferred style.

Dry Runs Using CLI

While using any of the commands provided by the CLI, you might find yourself wishing you could do a test run of the command to see what the CLI will generate and update for you without actually having to create the files and delete them if anything unexpected happens. Once again, the CLI comes to the rescue with a flag that allows you to inspect a command’s output without actually having the command execute and modify your project. This flag is the  – dry-run flag.


ng g c my-test-component --dry-run

If you’re a fan of aliases you can also use the alias for this flag, -d.


ng g c my-test-component -d

Skip Tests Using CLI

By now you may have noticed that many of these generate commands automatically generate test files in your application with the file extension .spec.ts. This is a nice default setting and shows how Angular pushes you in the direction of best practices, but sometimes you want to override the defaults and reduce the additional bloat to your application.

When generating schematics using the generate command, you can do this using the — spec flag:


ng g c my-testless-component --spec=false

You can also do this when creating your application with the new command:


ng new my-testless-application --skip-tests

ng new my-testless-application -S

With this, I’d like to end my blog here. If you have any doubts or queries regarding this article please post them in the comment section below. If you would like to learn all that you just learnt from this blog and more, about angular, and gear your career towards a proficient angular developer, then consider enrolling for our Angular Certification Course. 

Got a question for us? Please mention it in the comments section of this “Angular-CLI ” and we will get back to you.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.