Useful Angular commands for beginners

Useful Angular commands for beginners

Install Angular CLI: this command will install the Angular CLI if the node is install -g stand for global installation

npm install -g @angular/cli

Create a new angular application: This command will create a myfirstapp directory where you run this command where all necessary angular library will install for angular framework ng new myfirstapp

Run the application: this command runs the angular project in port 4200 by default

ng serve

ng serve --open

--open param will open the application in a browser after build

ng serve --port 4100

--port will use to change the default from the port which you will provide. After running, this command application URL will be http://localhost:4100

ng serve --base-href /app/

--base-href will use to add the virtual path in application URL, after running this command application URL will be http://localhost:4200/app

Create a component: Both command are same this will create a home component g stands for generating and c for component

ng generate a component home

ng g c home

Create a service: this command will create a service file

ng generate service data

Create a model class: this command will create article.model.ts & article.model.spec.ts file

ng generate class article --type=model

Create a directive: this will create article.directive.ts & article.directvice.spec.ts file for you

ng generate directive article

Generate a Pipe: this will create pipe file

ng generate pipe article

Generate Guard: this will create an Auth guard file

ng generate guard auth

The online help command is available in the command line. The output will be display available commands with a short description

ng help

Available Commands:

  • add Adds support for an external library to your project.
  • analytics Configures the gathering of Angular CLI usage metrics. See https://v8.angular.io/cli/usage-analytics-gathering.
  • build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
  • deploy Invokes the deploy builder for a specified project or for the default project in the workspace.
  • config Retrieves or sets Angular configuration values in the angular.json file for the workspace.
  • doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
  • e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor.
  • generate (g) Generates and/or modifies files based on a schematic.
  • help Lists available commands and their short descriptions.
  • lint (l) Runs linting tools on Angular app code in a given project folder.
  • new (n) Creates a new workspace and an initial Angular app.
  • run Runs an Architect target with an optional custom builder configuration defined in your project.
  • serve (s) Builds and serves your app, rebuilding on file changes.
  • test (t) Runs unit tests in a project.
  • update Updates your application and its dependencies. See https://update.angular.io/
  • version (v) Outputs Angular CLI version.
  • xi18n (i18n-extract) Extracts i18n messages from source code.

For more detailed help run "ng [command name] --help"

Related Articles