Angular 6
Angular 6
2018)
ng update
ng update <package> is a new CLI command that analyzes your package.json and uses its
knowledge of Angular to recommend updates to your application.
ng add
Another new CLI command ng add <package> makes adding new capabilities to your project
easy. ng add will use your package manager to download new dependencies and invoke an
installation script (implemented as a schematic) which can update your project with
configuration changes, add additional dependencies (e.g. polyfills), or scaffold package-specific
initialization code.
Angular Elements
The first release of Angular Elements is focused on allowing you to bootstrap Angular
components within an existing Angular application by registering them as Custom Elements.
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
entryComponents: [ AppComponent ]
})
export class AppModule {
constructor(private injector:Injector){}
ngDoBootstrap(){
const AppElement = createCustomElement(AppComponent, { injector: this.injector });
customElements.define('my-app', AppElement);
}
}
Material Sidenav
ng generate @angular/material:material-nav --name=my-nav
Material Dashboard
ng generate @angular/material:material-dashboard --name=my-dashboard
Material Data Table
ng generate @angular/material:material-table --name=my-table
CLI Workspaces
CLI v6 now has support for workspaces containing multiple projects, such as multiple
applications or libraries. CLI projects will now use angular.json instead of .angular-cli.json for
build and project configuration.
Library Support
One of the most requested features for our CLI has been support for creating and building
libraries, and we are proud to introduce:
ng generate library <name>
Tree Shakable Providers
To make your applications smaller, we’ve moved from modules referencing services to services
referencing modules. This allows us to only bundle services into your code base in modules
where they are injected.
Before:
@NgModule({
...
providers: [MyService]
})
export class AppModule {}
@Injectable()
export class MyService {
constructor() { }
}
@Injectable({
providedIn: 'root',
})
export class MyService {
constructor() { }
}
1. Update @angular/cli
1. TypeScript 2.7
2. RxJS 6.0.0
3. tslib 1.9.0
Build improvements
The build system Angular CLI uses has been overhauled to be faster and more easily
configurable.
We have upgrade to Webpack 4 which comes with several performance and bundling
improvements.
Angular Workspaces will also allow you to configure each build exactly the way you need
instead of using lengthy npm scripts:
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}}
MatTree component is now available,
<mat-table> and <cdk-table> now native <table> elements in addition to the existing display:
flex based layout.
MatTable now supports having an optional footer row
Ivy renderer
Running ng update
You can now run ng update for the CLI, Angular core and
Angular Material.
And then you can also run ng update to update Angular Material
and RxJS:
$ ng update @angular/material
$ ng update rxjs
Upgrading RxJS
For RxJS, the syntax for the import paths needs to be
updated, and operators need to be piped together instead of
chained together. Normally that would mean that you have to
update your code everywhere RxJS imports and operators are
used, but thankfully there’s a package that takes care of
most of the heavy lifting: rxjs-tslint.