How To Use Angular CLI

How To Use Angular CLI

How To Use Angular CLI

Emmanuel Ighosewe
Author
Emmanuel Ighosewe

Angular CLI is a command-line interface, hence the name "CLI", which contains the functionality provided by the Webpack. It utilizes Webpack to provide all packages, imports, BrowserLink, etc.; however, it is compulsory that you understand how Webpack works or the configuration it needs to run in other environments or different types of computers. CLI fully performs all configurations of Webpack, and developers can do this themselves if they do not want to adjust the settings themselves.

Besides, the CLI helps developers to generate code that adheres to best practices defined on the angular homepage.

Angular CLI Versions

Angular CLI launched its first beta version in 2017. Since then, over 450 versions have appeared.

Each new version of the angular framework will release a new version of the angular CLI. So, if you are using Angular 12, you will also need an Angular CL 12. This does not mean that the angular CLI version must be similar to your angular project version. Sometimes not. You can use a different angular CLI version than the angular project version.

Prerequisites

Before using Angular CLI, you must install Node.js 6.9.0 and npm 3.0.0 or later on in your system.

You can get the latest version of Node.js suitable for your operating system and get the latest installation instructions from the official Node.js website.

  • If you have installed Node.js and npm, you can check their versions by running:

$ node -v # => displays your Node.js version

$ npm -v # => displays your npm version

  • After installing Node.js, you can utilize the npm command for TypeScript installation:

$ npm install -g typescript@2.2.0

While TypeScript is not technically an absolute requirement, the Angular team highly recommends it; therefore, it is advisable you install it to make it as enjoyable as possible to work with Angular.

After installing Node.js and TypeScript, you can install angular CLI.

How to Install Angular CLI on Windows

First, you need to install node and npm on your development machine. There are different ways to do this, for example:

  • You can use NVM (Node Version Manager) to install and use different versions of system nodes
  • Utilizing the official package manager of the operating system
  • Installation from Angular official website

To streamline the installation process and prevent stress, you can opt-in for the official website option. All you have to do is visit the download page, find the binaries for Windows, and follow the installation wizard.

You can ensure that a Node is installed on your system by running the following command prompt, which should indicate the version of the installed node:

$ node -v

After that, you can run the commands for Angular CLI installation:

$ npm install @angular/CLI

There should be an Angular CLI installed the moment your command finishes.

How to Use the Angular CLI

Now that I've installed angular CLI, how do you use it?

Immediately open a terminal or command and run that command to view the default options and commands available for the Angular CLI.

To get more understanding about command, you can enter the command name followed by - Help.

Some Useful Commands in the CLI

You can get the following commands in Angular CLI:

  • add: Add external libraries support to your project.
  • build (b): Build the Angular application in an output directory called dist / in the specified output path. It must be run in the workspace directory.
  • config: Get or set the angle configuration value.
  • doc (d): Open the official Angular document in your browser and search for specific keywords.
  • e2e (e): Build and serve an angular application, then use Protractor to run end-to-end tests.
  • generate (g): Generates and modifies files based on a schematic.
  • help: Available commands are listed and their brief description.
  • lint (I): Runs the linting tools for the angular application code in a separate project folder.
  • new (n): Creates another (new) workspace and an Angular application.
  • run: run a custom target defined in your project
  • Service (s): Build and deploy your app, rebuild file changes.
  • test (t): runs unit tests for a project.
  • update: Update your app.
  • version (v): Produces the angular version of the CLI.
  • xi18n: Extract i18n messages from source code.

When Do You Need Angular CLI?

If the HTML and CSS are many, HTML must be in a separate template file and its styles in a separate style sheet. In this case, you need to manually create an HTML template and CSS files along with the component class file.

Because an application has many components in real life, when you build Angular applications, the components are accompanied by channels, guides, services, and more. It takes a long time to create a similar bipolar board code for all the components.

When there is more than one developer working on a project, you will create various files and write the code for the bipolar plate. It is designed to follow conventions and best practices; however, if not followed, manually reviewing the code is the only solution to find out, which is a very time-consuming and mundane task.

You need an Angular CLI when you need the best and right starter kits for your Angular projects. The CLI has so many advantages, and some of them are the ability to help you save both time and effort.

Being a command-line interface, it helps in building, developing, testing, and deploying angular applications.




Upstack is the best platform to match companies with top 1% tech talent worldwide.