Angular CLI Options and HMR enable

To install the Angular CLI first install Yarn (optional)

TL;DR;

yarn global add @angular/cli (OR npm install -g @angular/cli)
NEXT: ng set --global packageManager=yarn
FINALLY: ng new myApp --ng4 AND ng serve --hmr -e=hmr

FOR HMR

 

MY SAMPLE: https://github.com/tkhemani/angular4app

HMR CHANGES: https://github.com/tkhemani/angular4app/commit/35943d1d23c3a7cc6fbe169b43a0a0cdcb546aee

 

Bundling

All builds make use of bundling, and using the --prod flag in ng build --prod or ng serve --prod will also make use of uglifying and tree-shaking functionality.

Running unit tests

ng test

Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes. You can run tests a single time via --watch=false or --single-run.

Running end-to-end tests

ng e2e

Before running the tests make sure you are serving the app via ng serve. End-to-end tests are run via Protractor.

Additional Commands

 

ANGULAR CLI OPTIONS
ng build <options…>
Builds your app and places it into the output path (dist/ by default).
aliases: b
–target (String) (Default: development) Defines the build target.
aliases: -t <value>, -dev (–target=development), -prod (–target=production), –target <value>
–environment (String) Defines the build environment.
aliases: -e <value>, –environment <value>
–output-path (Path) Path where output will be placed.
aliases: -op <value>, –outputPath <value>
–aot (Boolean) Build using Ahead of Time compilation.
aliases: -aot
–sourcemap (Boolean) Output sourcemaps.
aliases: -sm, –sourcemaps, –sourcemap
–vendor-chunk (Boolean) (Default: true) Use a separate bundle containing only vendor libraries.
aliases: -vc, –vendorChunk
–base-href (String) Base url for the application being built.
aliases: -bh <value>, –baseHref <value>
–deploy-url (String) URL where files will be deployed.
aliases: -d <value>, –deployUrl <value>
–verbose (Boolean) (Default: false) Adds more details to output logging.
aliases: -v, –verbose
–progress (Boolean) (Default: true) Log progress to the console while building.
aliases: -pr, –progress
–i18n-file (String) Localization file to use for i18n.
aliases: –i18nFile <value>
–i18n-format (String) Format of the localization file specified with –i18n-file.
aliases: –i18nFormat <value>
–locale (String) Locale to use for i18n.
aliases: –locale <value>
–extract-css (Boolean) Extract css from global styles onto css files instead of js ones.
aliases: -ec, –extractCss
–watch (Boolean) (Default: false) Run build when files change.
aliases: -w, –watch
–output-hashing=none|all|media|bundles (String) Define the output filename cache-busting hashing mode.
aliases: -oh <value>, –outputHashing <value>
–poll (Number) Enable and define the file watching poll time period (milliseconds).
aliases: -poll <value>
–app (String) Specifies app name to use.
aliases: -a <value>, -app <value>
–stats-json (Boolean) (Default: false) Generates a stats.json file which can be analyzed using tools such as: webpack-bundle-analyzer or https://webpack.github.io/analyse.
aliases: –statsJson

ng completion <options…>
Adds autocomplete functionality to ng commands and subcommands.
–all (Boolean) (Default: true) Generate a completion script compatible with both bash and zsh.
aliases: -a, -all
–bash (Boolean) (Default: false) Generate a completion script for bash.
aliases: -b, -bash
–zsh (Boolean) (Default: false) Generate a completion script for zsh.
aliases: -z, -zsh

ng doc <keyword>
Opens the official Angular documentation for a given keyword.

ng e2e <options…>
Run e2e tests in existing project.
aliases: e
–target (String) (Default: development) Defines the build target.
aliases: -t <value>, -dev (–target=development), -prod (–target=production), –target <value>
–environment (String) Defines the build environment.
aliases: -e <value>, –environment <value>
–output-path (Path) Path where output will be placed.
aliases: -op <value>, –outputPath <value>
–aot (Boolean) Build using Ahead of Time compilation.
aliases: -aot
–sourcemap (Boolean) Output sourcemaps.
aliases: -sm, –sourcemaps, –sourcemap
–vendor-chunk (Boolean) (Default: true) Use a separate bundle containing only vendor libraries.
aliases: -vc, –vendorChunk
–base-href (String) Base url for the application being built.
aliases: -bh <value>, –baseHref <value>
–deploy-url (String) URL where files will be deployed.
aliases: -d <value>, –deployUrl <value>
–verbose (Boolean) (Default: false) Adds more details to output logging.
aliases: -v, –verbose
–progress (Boolean) (Default: true) Log progress to the console while building.
aliases: -pr, –progress
–i18n-file (String) Localization file to use for i18n.
aliases: –i18nFile <value>
–i18n-format (String) Format of the localization file specified with –i18n-file.
aliases: –i18nFormat <value>
–locale (String) Locale to use for i18n.
aliases: –locale <value>
–extract-css (Boolean) Extract css from global styles onto css files instead of js ones.
aliases: -ec, –extractCss
–watch (Boolean) (Default: false) Run build when files change.
aliases: -w, –watch
–output-hashing=none|all|media|bundles (String) Define the output filename cache-busting hashing mode.
aliases: -oh <value>, –outputHashing <value>
–poll (Number) Enable and define the file watching poll time period (milliseconds).
aliases: -poll <value>
–app (String) Specifies app name to use.
aliases: -a <value>, -app <value>
–port (Number) (Default: 0) The port to use to serve the application.
aliases: -p <value>, -port <value>
–host (String) (Default: localhost) Listens only on localhost by default.
aliases: -H <value>, -host <value>
–proxy-config (Path) Proxy configuration file.
aliases: -pc <value>, –proxyConfig <value>
–ssl (Boolean) (Default: false) Serve using HTTPS.
aliases: -ssl
–ssl-key (String) (Default: ssl/server.key) SSL key to use for serving HTTPS.
aliases: –sslKey <value>
–ssl-cert (String) (Default: ssl/server.crt) SSL certificate to use for serving HTTPS.
aliases: –sslCert <value>
–open (Boolean) (Default: false) Opens the url in default browser.
aliases: -o, -open
–live-reload (Boolean) (Default: true) Whether to reload the page on change, using live-reload.
aliases: -lr, –liveReload
–live-reload-client (String) Specify the URL that the live reload browser client will use.
aliases: –liveReloadClient <value>
–hmr (Boolean) (Default: false) Enable hot module replacement.
aliases: -hmr
–config (String) Use a specific config file. Defaults to the protractor config file in angular-cli.json.
aliases: -c <value>, –config <value>
–specs (Array) (Default: ) Override specs in the protractor config. Can send in multiple specs by repeating flag (ng e2e –specs=spec1.ts –specs=spec2.ts).
aliases: -sp <value>, –specs <value>
–element-explorer (Boolean) (Default: false) Start Protractor’s Element Explorer for debugging.
aliases: -ee, –elementExplorer
–webdriver-update (Boolean) (Default: true) Try to update webdriver.
aliases: -wu, –webdriverUpdate
–serve (Boolean) (Default: true) Compile and Serve the app. All non-reload related serve options are also available (e.g. –port=4400).
aliases: -s, –serve

ng eject <options…>
Ejects your app and output the proper webpack configuration and scripts.
–target (String) (Default: development) Defines the build target.
aliases: -t <value>, -dev (–target=development), -prod (–target=production), –target <value>
–environment (String) Defines the build environment.
aliases: -e <value>, –environment <value>
–output-path (Path) Path where output will be placed.
aliases: -op <value>, –outputPath <value>
–aot (Boolean) Build using Ahead of Time compilation.
aliases: -aot
–sourcemap (Boolean) Output sourcemaps.
aliases: -sm, –sourcemaps, –sourcemap
–vendor-chunk (Boolean) (Default: true) Use a separate bundle containing only vendor libraries.
aliases: -vc, –vendorChunk
–base-href (String) Base url for the application being built.
aliases: -bh <value>, –baseHref <value>
–deploy-url (String) URL where files will be deployed.
aliases: -d <value>, –deployUrl <value>
–verbose (Boolean) (Default: false) Adds more details to output logging.
aliases: -v, –verbose
–progress (Boolean) (Default: true) Log progress to the console while building.
aliases: -pr, –progress
–i18n-file (String) Localization file to use for i18n.
aliases: –i18nFile <value>
–i18n-format (String) Format of the localization file specified with –i18n-file.
aliases: –i18nFormat <value>
–locale (String) Locale to use for i18n.
aliases: –locale <value>
–extract-css (Boolean) Extract css from global styles onto css files instead of js ones.
aliases: -ec, –extractCss
–watch (Boolean) (Default: false) Run build when files change.
aliases: -w, –watch
–output-hashing=none|all|media|bundles (String) Define the output filename cache-busting hashing mode.
aliases: -oh <value>, –outputHashing <value>
–poll (Number) Enable and define the file watching poll time period (milliseconds).
aliases: -poll <value>
–force (Boolean) Overwrite any webpack.config.js and npm scripts already existing.
aliases: –force
–app (String) Specifies app name to use.
aliases: -a <value>, -app <value>

ng generate <blueprint> <options…>
Generates new code from blueprints.
aliases: g
–dry-run (Boolean) (Default: false) Run through without making any changes.
aliases: -d, –dryRun
–verbose (Boolean) (Default: false) Adds more details to output logging.
aliases: -v, –verbose

ng get <options…>
Get a value from the configuration.
–global (Boolean) (Default: false) Get the value in the global configuration (in your home directory).
aliases: –global

ng help <command-name (Default: all)>
Shows help for the CLI.

ng lint <options…>
Lints code in existing project.
aliases: l
–fix (Boolean) (Default: false) Fixes linting errors (may overwrite linted files).
aliases: -fix
–force (Boolean) (Default: false) Succeeds even if there was linting errors.
aliases: –force
–format (String) (Default: prose) Output format (prose, json, stylish, verbose, pmd, msbuild, checkstyle, vso, fileslist).
aliases: –format <value>

ng new <options…>
Creates a new directory and a new Angular app.
–dry-run (Boolean) (Default: false) Run through without making any changes.
aliases: -d, –dryRun
–verbose (Boolean) (Default: false) Adds more details to output logging.
aliases: -v, –verbose
–link-cli (Boolean) (Default: false) Automatically link the @angular/cli package.
aliases: -lc, –linkCli
–ng4 (Boolean) (Default: false) Create a project with Angular 4 in the template.
aliases: -ng4
–skip-install (Boolean) (Default: false) Skip installing packages.
aliases: -si, –skipInstall
–skip-git (Boolean) (Default: false) Skip initializing a git repository.
aliases: -sg, –skipGit
–skip-tests (Boolean) (Default: false) Skip creating spec files.
aliases: -st, –skipTests
–skip-commit (Boolean) (Default: false) Skip committing the first commit to git.
aliases: -sc, –skipCommit
–directory (String) The directory name to create the app in.
aliases: -dir <value>, –directory <value>
–source-dir (String) (Default: src) The name of the source directory.
aliases: -sd <value>, –sourceDir <value>
–style (String) (Default: css) The style file default extension.
aliases: –style <value>
–prefix (String) (Default: app) The prefix to use for all component selectors.
aliases: -p <value>, –prefix <value>
–routing (Boolean) (Default: false) Generate a routing module.
aliases: –routing
–inline-style (Boolean) (Default: false) Should have an inline style.
aliases: -is, –inlineStyle
–inline-template (Boolean) (Default: false) Should have an inline template.
aliases: -it, –inlineTemplate

ng serve <options…>
Builds and serves your app, rebuilding on file changes.
aliases: server, s
–target (String) (Default: development) Defines the build target.
aliases: -t <value>, -dev (–target=development), -prod (–target=production), –target <value>
–environment (String) Defines the build environment.
aliases: -e <value>, –environment <value>
–output-path (Path) Path where output will be placed.
aliases: -op <value>, –outputPath <value>
–aot (Boolean) Build using Ahead of Time compilation.
aliases: -aot
–sourcemap (Boolean) Output sourcemaps.
aliases: -sm, –sourcemaps, –sourcemap
–vendor-chunk (Boolean) (Default: true) Use a separate bundle containing only vendor libraries.
aliases: -vc, –vendorChunk
–base-href (String) Base url for the application being built.
aliases: -bh <value>, –baseHref <value>
–deploy-url (String) URL where files will be deployed.
aliases: -d <value>, –deployUrl <value>
–verbose (Boolean) (Default: false) Adds more details to output logging.
aliases: -v, –verbose
–progress (Boolean) (Default: true) Log progress to the console while building.
aliases: -pr, –progress
–i18n-file (String) Localization file to use for i18n.
aliases: –i18nFile <value>
–i18n-format (String) Format of the localization file specified with –i18n-file.
aliases: –i18nFormat <value>
–locale (String) Locale to use for i18n.
aliases: –locale <value>
–extract-css (Boolean) Extract css from global styles onto css files instead of js ones.
aliases: -ec, –extractCss
–watch (Boolean) (Default: true) Rebuild on change.
aliases: -w, –watch
–output-hashing=none|all|media|bundles (String) Define the output filename cache-busting hashing mode.
aliases: -oh <value>, –outputHashing <value>
–poll (Number) Enable and define the file watching poll time period (milliseconds).
aliases: -poll <value>
–app (String) Specifies app name to use.
aliases: -a <value>, -app <value>
–port (Number) (Default: 4200) Port to listen to for serving.
aliases: -p <value>, -port <value>
–host (String) (Default: localhost) Listens only on localhost by default.
aliases: -H <value>, -host <value>
–proxy-config (Path) Proxy configuration file.
aliases: -pc <value>, –proxyConfig <value>
–ssl (Boolean) (Default: false) Serve using HTTPS.
aliases: -ssl
–ssl-key (String) (Default: ssl/server.key) SSL key to use for serving HTTPS.
aliases: –sslKey <value>
–ssl-cert (String) (Default: ssl/server.crt) SSL certificate to use for serving HTTPS.
aliases: –sslCert <value>
–open (Boolean) (Default: false) Opens the url in default browser.
aliases: -o, -open
–live-reload (Boolean) (Default: true) Whether to reload the page on change, using live-reload.
aliases: -lr, –liveReload
–live-reload-client (String) Specify the URL that the live reload browser client will use.
aliases: –liveReloadClient <value>
–hmr (Boolean) (Default: false) Enable hot module replacement.
aliases: -hmr

ng set <options…>
Set a value in the configuration.
–global (Boolean) (Default: false) Set the value in the global configuration rather than in your project’s.
aliases: -g, –global

ng test <options…>
Runs your app’s test suite.
aliases: t
–watch (Boolean) (Default: true) Run build when files change.
aliases: -w, –watch
–code-coverage (Boolean) (Default: false) Coverage report will be in the coverage/ directory.
aliases: -cc, –codeCoverage
–config (String) Use a specific config file. Defaults to the protractor config file in angular-cli.json.
aliases: -c <value>, –config <value>
–single-run (Boolean) (Default: false) Run tests a single time.
aliases: -sr, –singleRun
–progress (Boolean) (Default: true) Log progress to the console while in progress.
aliases: –progress
–browsers (String) Override which browsers tests are run against.
aliases: –browsers <value>
–colors (Boolean) Enable or disable colors in the output (reporters and logs).
aliases: –colors
–log-level (String) Level of logging.
aliases: –logLevel <value>
–port (Number) Port where the web server will be listening.
aliases: -port <value>
–reporters (String) List of reporters to use.
aliases: –reporters <value>
–build (Boolean) (Default: true) Build prior to running tests.
aliases: –build
–sourcemap (Boolean) (Default: true) Output sourcemaps.
aliases: -sm, –sourcemap
–poll (Number) Enable and define the file watching poll time period (milliseconds).
aliases: -poll <value>
–app (String) Specifies app name to use.
aliases: -a <value>, -app <value>

ng version <options…>
Outputs Angular CLI version.
aliases: v, –version, -v
–verbose (Boolean) (Default: false) Adds more details to output logging.
aliases: –verbose

ng xi18n <options…>
Extracts i18n messages from source code.
–i18n-format (String) (Default: xlf) Output format for the generated file.
aliases: -f <value>, -xmb (–i18n-format=xmb), -xlf (–i18n-format=xlf), –xliff (–i18n-format=xlf), –i18nFormat <value>
–output-path (Path) (Default: null) Path where output will be placed.
aliases: -op <value>, –outputPath <value>
–verbose (Boolean) (Default: false) Adds more details to output logging.
aliases: –verbose
–progress (Boolean) (Default: true) Log progress to the console while running.
aliases: –progress
–app (String) Specifies app name to use.
aliases: -a <value>, -app <value>
–locale (String) Specifies the source language of the application.
aliases: -l <value>, –locale <value>
–out-file (String) Name of the file to output.
aliases: -of <value>, –outFile <value>

 

 

ref:

https://github.com/jschwarty/angularcli-hmr-example

See: https://medium.com/@beeman/tutorial-enable-hrm-in-angular-cli-apps-1b0d13b80130#.dx6k0xq64

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s