Angular CLI
advanced use and more
Stepan Suvorov
CTO @ Studytube
`${new Date().getFullYear() - 2012} years with Angular`
ng
ng new
-
--inline-style, --inline-template
-
--view-encapsulation
-
--prefix
-
--skip-tests or --minimal ( --dry-run) -
--routing
-
--style
ng build
-
--base-href
-
--extract-css
-
--output-hashing
-
--verbose
-
--service-worker
- ...
ng generate
-
ng generate application
-
ng generate library
-
ng generate univeral
-
--collection @schematics/angular
ng generate application
ng new
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"myapp": {
...
},
"myapp2": {
...
},
"myapp3": {
...
},
},
"defaultProject": "myapp"
}ng generate library
-
ng generate library mylib
-
cd dist/mylib
-
npm publish
ng generate universal
ng generate universal project-name
- create src/app/app.server.module.ts
- create src/main.server.ts
- create src/tsconfig.server.json
- update package.json
- update .angular-cli.json
- update src/main.ts
- update src/app/app.module.ts
- update .gitignore
ng serve
-
--ssl (--ssl-cert --ssl-key)
-
--open -
--proxy-config
-
--hmr
ng lint
-
--fix
ng get / ng set
-
ng get project.name
-
ng set "apps[0].root" src
ng docs
ng eject
ng xi18n
proxy
-
--proxy-config proxy.conf.json
{
"/api": {
"target": "http://localhost:3000"
}
}proxy.conf.json
proxy rewrite
{
"/api": {
target: "http://localhost:3000",
pathRewrite: {"^/api" : ""}
}
}proxy.conf.json
proxy bypass
{
"/api": {
target: "http://localhost:3000",
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf("html") !== -1) {
console.log("Skipping proxy for browser request.");
return "/index.html";
}
}
}
}proxy.conf.json
proxy more options
angular-cli proxy
webpack proxy
hot module replacement (hmr)
-
$ ng serve --hmr -e=hmr
-
$ npm install -D @angularclass/hmr
- create hmrBootstrap
hmrBootstrap
import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap =
(module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
let ngModule: NgModuleRef<any>;
module.hot.accept();
bootstrap().then(currentModule => ngModule = currentModule);
module.hot.dispose(() => {
const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
const elements = appRef.components.map(c => c.location.nativeElement);
const removeOldHosts = createNewHosts(elements);
ngModule.destroy();
removeOldHosts();
});
};hmrBootstrap
import { createNewHosts } from '@angularclass/hmr';
bootstrap().then(currentModule => ngModule = currentModule);
module.hot.dispose(() => {
removeOldHosts = createNewHosts(elements);
ngModule.destroy();
removeOldHosts();
});
Schematics
ng add
- ng add @angular/pwa — Turn your application into a PWA by adding an app manifest and service worker
- ng add @ng-bootstrap/schematics — Add ng-bootstrap to your application
- ng add @angular/material — Install and setup Angular Material and theming and register new starter components into ng generate
- ng add @clr/angular — Install and setup Clarity from VMWare
- ng add @angular/elements — Add the needed document-register-element.js polyfill and dependencies for Angular Elements (see below)
ng add
- ng generate @angular/material:material-nav --name=my-nav
- ng generate @angular/material:material-dashboard --name=my-dashboard
- ng generate @angular/material:material-table --name=my-table
nx
Thank you for your attention.
Questions?
Use Angular CLI in a Full Mode
By Stepan Suvorov
