Angular 9/8 CLI Commands: Install Angular CLI On Windows 10, Linux and macOS

Angular 9/8 CLI Commands: Install Angular CLI On Windows 10, Linux and macOS

Angular CLI is a powerful tool available for Angular developers. In this tutorial, you'll be learning how to install and use Angular CLI 9 (the latest pre-release version as of this writing) on Windows 10, Linux and macOS to create Angular applications and various constructs like modules, services, components and pipes etc.

Introducing Angular CLI 9

Angular CLI is a tool developed by the Angular team to enable developers to quickly create Angular projects without wasting time setting up complex build tools like Webpack. It's the official tool for Angular development and it's buit on top of Node.js and can be installed from NPM.

As the time of this writing Angular CLI 9 is the latest pre-release version.

Note: This tutorial is a part of our Angular 9 examples series we'll see various examples of using the features of Angular with quick tutorials.

As an example, we suppose we'll be building a car insurance front-end web application.

Note: This tutorial is also valid for Angular 8.

Prerequisites

In order to follow this tutorial, you'll need to have a development environment ready for front-end development with Angular.

In nutshell, you need to have:

  • Node.js 10+ and NPM installed. You can install both from the official website. On Ubuntu you can follow this tutorial,
  • Basic knowledge of TypeScript,
  • Basic knowledge of Unix bash for macOS and Linux users,
  • Or basic knowledge of CMD or Powershell for Windows users.

In this tutorial, we assume you are working with a bash terminal. If that's not the case you can simply use the equivalent commands in Windows Command Prompt or Powershell.

You can check the available version of Node.js in your system using:

$ node -v

How to install Angular CLI 9 on Windows, Linux and Mac?

In this section, you'll start by installing the Angular CLI 9 which is, as we mentionned before, the latest prerelease version as of this writing.

Open your terminal and run the following command:

$ npm install --global @angular/cli@next

As the time of writing this tutorial @angular/cli v9.0.0-rc.2` will be installed.

This step assumes you've installed Node.js and npm in your system.

In Debian-based system and macOS, you may need to add sudo to your command in order to install your package globally. This depends on your npm configuration so make sure you either configure npm properly or simply add sudo. On Windows, you'll need to open CMD or Powershell with administrator privileges

You can quickly see all the available commands that you can use with the CLI by running the following command:

$ ng help

Angular CLI 9

Now that you've installed the CLI, you can generate an Angular 9 project but first let's introduce the application we'll be building and the requirements we'll be implementing in this tutorial series.

Introducing the Project's Requirements

Let's suppose we are tasked with building a car insurance web application (just the front-end, the back-end will be built by the back-end developer).

It provides a CRUD interface for handling operations to create, get, update and delete data that can be categorized into the following categories:

  • Employees,
  • Clients,
  • Policies,
  • Vehicles/Cars,
  • Drivers,
  • Payments,
  • Coverage etc.

Let's see how we can use Angular CLI 9 to quickly bootstrap our project.

 Step 1 - Generating a New Angular 9 Project With Angular CLI

Now that you have Angular CLI installed and you understand what web application you are going to develop. You need to generate a project by running the following command:

$ ng new angular-car-insurance 

You will be prompted for a couple of things — If Would you like to add Angular routing? Say y and Which stylesheet format would you like to use? Pick CSS.

This will set up routing in our project and set CSS as the stylesheets format for components.

Wait for the CLI to generate the project structure and install the dependencies.

Step 2 - Serving the Project With Angular CLI Server

Angular CLI provides a development server that you can use to serve your projects locally when your developing them with many features like live code reloading which allows you to change your code and see the results without manually re-starting the development server to reloading the application in the browser.

To start the develoment server and serve your project,  you simply need to use the serve command.

First, navigate into your project's root folder and run the serve command:

$ cd angular-car-insurance 
$ ng serve

The development server will be available from the localhost:4200 address.

Step 3 - Understanding your Project Anatomy

Before you start adding any code to your project, let's first understand the project's anatomy. These are the files and folders contained in the project:

  • /e2e/: This folder contains end-to-end (simulating user behavior) tests of the website.
  • /node_modules/: All 3rd party libraries are installed to this folder using npm install.
  • /src/: It contains the source code of the application. Most work will be done here.
    • /app/: It contains modules and components.
    • /assets/: It contains static assets like images, icons and styles etc.
    • /environments/: It contains environment (production and development) specific configuration files.
    • browserslist: Needed by autoprefixer for CSS support.
    • favicon.ico: The favicon.
    • index.html: The main HTML file.
    • karma.conf.js: The configuration file for Karma (a testing tool)
    • main.ts: The main starting file from where the AppModule is bootstrapped.
    • polyfills.ts: Polyfills needed by Angular.
    • styles.css: The global stylesheet file for the project.
    • test.ts: This is a configuration file for Karma
    • tsconfig.*.json: The configuration files for TypeScript.
  • angular.json: It contains the configurations for CLI
  • package.json: It contains basic information of the project (name, description and dependencies etc.)
  • README.md: A Markdown file that contains a description of the project.
  • tsconfig.json: The configuration file for TypeScript.
  • tslint.json: The configuration file for TSlint (a static analysis tool)

You can configure many aspects of your project from the angular.json file. And most of the work you will do will be in the src/app folder that contains the actual code of your application.

You can also define any environment variables inside the src/environments folder.

Step 4 - Creating Angular 9 Modules

The project deals with many domain entities like:

  • Login, registration and user management,
  • Vehicle and car management,
  • Insurance policy, payment and coverage management,
  • Employees management,
  • And clients management.

You can divide the project into multiple Angular modules for better organization and maintenance. These are the modules that you can create according to the functionalities that you need to handle in your application:

  • The auth module for encapsulating authentication functionality,
  • The vehicles module for encapsulating the code for creating, displaying, updating and deleting vehicles and cars,
  • The insurance module for encapsulating the code for working with policies, payments and coverage,
  • The employees module for encapsulating the code for working with employees,
  • The clients module for encapsulating the code for working with clients.

Let's now create the modules. Head back to your terminal and run the following commands to create the modules with the Angular CLI:

$ ng g module auth
$ ng g module vehicles
$ ng g module insurance
$ ng g module employees
$ ng g module clients

That's it. After creating the modules, you will next create the components for your project.

Step 5 - Creating Angular 9 Components

A component is a TypeScript class decorated with the @Component decorator. It controls a part of application screen. You can read more information about components from this tutorial.

In this example, you need to create many components in each module. Let's generate the first component:

$ ng generate component insurance/policy-list

policy-list is the name we've given to the component that displays the list of policies. You can, also just use g instead of generate.

We are prefixing the name of the component with the module name, i.e insurance/policy-list so the CLI will add the component to the insurance module instead of the main module.

You also need to generate the other components of the application, such as:

$ ng g component insurance/policy-create
$ ng g component insurance/policy-update
$ ng g component insurance/payment-create
$ ng g component insurance/coverage-create

$ ng g component vehicles/vehicle-list
$ ng g component vehicles/vehicle-create
$ ng g component vehicles/vehicle-update

$ ng g component employees/employee-list
$ ng g component employees/employee-create
$ ng g component employees/employee-update

$ ng g component clients/client-list
$ ng g component clients/client-create
$ ng g component clients/client-update

$ ng g component auth/login
$ ng g component auth/register

These are all the components that we need in our application. Each component is added to its own module.

Conclusion

In this tutorial, we've learned to use Angular CLI 9 to create an example vehicle insurance project with features like modules and components.


  • Author: Techiediaries Team


Angular 9 Components: Input and Output
Angular 13 selectors
Picture-in-Picture with JavaScript and Angular 10
Jasmine Unit Testing for Angular 12
Angular 9 Tutorial By Example: REST CRUD APIs & HTTP GET Requests with HttpClient
Angular 10/9 Elements Tutorial by Example: Building Web Components
Angular 10/9 Router Tutorial: Learn Routing & Navigation by Example
Angular 10/9 Router CanActivate Guards and UrlTree Parsed Routes
Angular 10/9 JWT Authentication Tutorial with Example
Style Angular 10/9 Components with CSS and ngStyle/ngClass Directives
Upload Images In TypeScript/Node & Angular 9/Ionic 5: Working with Imports, Decorators, Async/Await and FormData
Angular 9/Ionic 5 Chat App: Unsubscribe from RxJS Subjects, OnDestroy/OnInit and ChangeDetectorRef
Adding UI Guards, Auto-Scrolling, Auth State, Typing Indicators and File Attachments with FileReader to your Angular 9/Ionic 5 Chat App
Private Chat Rooms in Angular 9/Ionic 5: Working with TypeScript Strings, Arrays, Promises, and RxJS Behavior/Replay Subjects
Building a Chat App with TypeScript/Node.js, Ionic 5/Angular 9 & PubNub/Chatkit
Chat Read Cursors with Angular 9/Ionic 5 Chat App: Working with TypeScript Variables/Methods & Textarea Keydown/Focusin Events
Add JWT REST API Authentication to Your Node.js/TypeScript Backend with TypeORM and SQLite3 Database
Building Chat App Frontend UI with JWT Auth Using Ionic 5/Angular 9
Install Angular 10 CLI with NPM and Create a New Example App with Routing
Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Integrate Bootstrap 4/jQuery with Angular 10 and Styling the UI With Navbar and Table CSS Classes
Angular 10/9 Tutorial and Example: Build your First Angular App
Angular 9/8 ngIf Tutorial & Example
Angular 10 New Features
Create New Angular 9 Workspace and Application: Using Build and Serve
Angular 10 Release Date: Angular 10 Will Focus on Ivy Artifacts and Libraries Support
HTML5 Download Attribute with TypeScript and Angular 9
Angular 9.1+ Local Direction Query API: getLocaleDirection Example
Angular 9.1 displayBlock CLI Component Generator Option by Example
Angular 9 Basics Tutorial by Example
Angular 9/8 ngFor Directive: Render Arrays with ngFor by Example
Responsive Image Breakpoints Example with CDK's BreakpointObserver in Angular 9/8
Angular 9/8 DOM Queries: ViewChild and ViewChildren Example
The Angular 9/8 Router: Route Parameters with Snapshot and ParamMap by Example
Angular 9/8 Nested Routing and Child Routes by Example
Angular 9 Examples: 2 Ways To Display A Component (Selector & Router)
Angular 9/8 Tutorial: Http POST to Node/Express.js Example
Angular 9/8 Feature and Root Modules by Example
Angular 9/8 with PHP: Consuming a RESTful CRUD API with HttpClient and Forms
Angular 9/8 with PHP and MySQL Database: REST CRUD Example & Tutorial
Unit Testing Angular 9/8 Apps Tutorial with Jasmine & Karma by Example
Angular 9 Web Components: Custom Elements & Shadow DOM
Angular 9 Renderer2 with Directives Tutorial by Example
Build Progressive Web Apps (PWA) with Angular 9/8 Tutorial and Example
Angular 9 Internationalization/Localization with ngx-translate Tutorial and Example
Create Angular 9 Calendar with ngx-bootstrap datepicker Example and Tutorial
Multiple File Upload with Angular 9 FormData and PHP by Example
Angular 9/8 Reactive Forms with Validation Tutorial by Example
Angular 9/8 Template Forms Tutorial: Example Authentication Form (ngModel/ngForm/ngSubmit)
Angular 9/8 JAMStack By Example
Angular HttpClient v9/8 — Building a Service for Sending API Calls and Fetching Data
Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9
Build an Angular 9/8 CRUD Example & Tutorial
Styling An Angular 9/8/7 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Angular 9/8 CLI Commands: Install Angular CLI On Windows 10, Linux and macOS
Angular 8/7 Tutorial By Example: (REST API, HttpClient GET, Components, Services & ngFor)