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
- Angular-CLI Installation
- Generation and Aliases
- Routing With Angular-CLI
- Styling Preprocessors Using Angular-CLI
- Performing Dry-Runs Using CLI
- Skip Test Using CLI
Introduction to the Angular CLI
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
