All You Need To Know About Angular CLI

0 422

In this article, we will discuss the basics of Angular CLI. Angular CLI provides an easy way to start with any Angular project. It comes with commands that help us to create and start the Angular project fastly. Let go through with the available commands. You need to setup the node js and npm to work with the CLI. You can get the node setup here as per your system compatibility.

Let’s confirm the version of node and npm in working or not.

Angular CLI

# Install Angular CLI

Firstly, we need to install the Angular CLI. You can use the given command:

npm install -g @angular/cli

After the successful installation, Angular CLI is ready for use.

# Create and run an Angular App.

ng new ngApp
cd ngApp
ng serve

In these commands first, we are creating a new angular app using “ng new projectName” command. Then using the basic “cd projectName” command to enter in the app folder. And using the ng serve” command to execute the Angular application.

Angular CLI

After executing the “ng serve”, NG Live development server is listening on “localhost:4200”.

We can change the port no as per the requirement, using the “–port” with the “ng serve” command.

ng serve --port 90

Angular CLI

After executing the “ng serve” NG Live development server is listening on “localhost:90”.

# Generating Components, Directives, Pipes and Services

You can use the ng generate (or just ng g) command to generate Angular components:

ng generate component my-new-component
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run

ng g component new-cmp

# your component will be generated in src/app/feature/new-cmp
# but if you were to run

ng g component ./newer-cmp

# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run

ng g component feature/new-cmp 

# and your component will be generated in src/app/feature/new-cmp

You can find all possible blueprints in the table below:

  • Component: ng g component my-new-component
  • Directive: ng g directive my-new-directive
  • Pipe: ng g pipe my-new-pipe
  • Service: ng g service my-new-service
  • Class: ng g class my-new-class
  • Guard: ng g guard my-new-guard
  • Interface: ng g interface my-new-interface
  • Enum: ng g enum my-new-enum
  • Module: ng g module my-module

angular-cli will add the reference to components, directives, and pipes automatically in the “app.module.ts”.

If you need to add this references to another custom module, follow this steps:

// create a new module
ng g module new-module

// This should add the new component, directive or pipe reference to the new-module you've created.
ng g component new-module/new-component

We will discuss more on Angular CLI in our future post. Feel free to comment if any query.

Leave A Reply

Your email address will not be published.