Skip to content

Angular CLI

Jump to bottom
Yash edited this page Jun 25, 2018 · 5 revisions

Use the CLI tool to quickly build Angular applications.

Good tools make application development quicker and easier to maintain than if you did everything by hand.
The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

An Angular CLI project is the foundation for both quick experiments and enterprise solutions.

Generating and serving an Angular project via a development server

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

You can configure the default HTTP host and port used by the development server with two command-line options :

ng serve --host 0.0.0.0 --port 4201

Generating Components, Directives, Pipes and Services

You can use the ng generate (or just ng g) command to generate Angular components:
You can find all possible blueprints in the table below:

Scaffold Usage
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 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:

  1. ng g module new-module to create a new module
  2. call ng g component new-module/new-component

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

Angular CLI QuickStart

A command line interface for Angular. The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications
To install the Angular CLI:

The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app.

Summary Goes Here ...this is hidden, collapsable content...
Why skipped Angular 3

To prevent conflict of the router package version, the Angular team decided to skip the version 3 go straight for Angular v4. In this way again, all the core packages are aligned which will be easier to maintain and help avoid confusion in the future.

Angular Libraries

NPM Packages version release
@angular/core 2.3.0 Minor
@angular/compiler 2.3.0 Minor
@angular/http 2.3.0 Minor
@angular/router 3.3.0 Majour

Angular 4 « In order to align this versions and avoid confusion in the future Angular team decided to go stright to Angular version 4.

ng serve builds the application and starts a web server.

ng serve [project]

Options:

prod

--prod

Flag to set configuration to "prod".

configuration

--configuration (alias: -c)

Specify the configuration to use.

browser-target

--browser-target

Target to serve.

port

--port

Port to listen on.

host

--host

Host to listen on.

proxy-config

--proxy-config

Proxy configuration file.

ssl

--ssl

Serve using HTTPS.

ssl-key

--ssl-key

SSL key to use for serving HTTPS.

ssl-cert

--ssl-cert

SSL certificate to use for serving HTTPS.

open

--open (alias: -o)

Opens the url in default browser.

live-reload

--live-reload

Whether to reload the page on change, using live-reload.

public-host

--public-host

Specify the URL that the browser client will use.

serve-path

--serve-path

The pathname where the app will be served.

disable-host-check

--disable-host-check

Don't verify connected clients are part of allowed hosts.

hmr

--hmr

Enable hot module replacement.

watch

--watch

Rebuild on change.

hmr-warning

--hmr-warning

Show a warning when the --hmr option is enabled.

serve-path-default-warning

--serve-path-default-warning

Show a warning when deploy-url/base-href use unsupported serve path values.

optimization

--optimization

Defines the optimization level of the build.

aot

--aot

Build using Ahead of Time compilation.

source-map

--source-map

Output sourcemaps.

eval-source-map

--eval-source-map

Output in-file eval sourcemaps.

vendor-chunk

--vendor-chunk

Use a separate bundle containing only vendor libraries.

common-chunk

--common-chunk

Use a separate bundle containing code used across multiple bundles.

base-href

--base-href

Base url for the application being built.

deploy-url

--deploy-url

URL where files will be deployed.

verbose

--verbose

Adds more details to output logging.

progress

--progress

Log progress to the console while building.

Clone this wiki locally