A complete Guide to the Angular CLI

A complete Guide to the Angular CLI

In this article, we will be discussing the command line interface that comes along with Angular, i.e the angular-CLI.

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 post

Introduction to the Angular CLI

cli icon - angular cli - edureka

When 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. 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 d _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 post here. If you have any doubts or queries regarding this article please post them in the comment section below.

angular web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.