0% found this document useful (0 votes)
18 views6 pages

Angular 6

Uploaded by

Aditi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
18 views6 pages

Angular 6

Uploaded by

Aditi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Angular 6 (03.05.

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.

 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 @angular/elements — Add the needed document-register-element.js polyfill and
dependencies for Angular Elements

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';

import { AppComponent } from './app.component';

@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);
}
}

<my-app name="Angular Elements!">loading</my-app>

Angular Material + CDK Components


The biggest addition is the new tree component for displaying hierarchical data. Following
patterns from the data-table component, the CDK houses the core tree directives, with Angular
Material offering the same experience with Material Design styles on top.

Angular Material Starter Components

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 {}

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
constructor() { }
}

After: No references are needed in our NgModule.


import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root',
})
export class MyService {
constructor() { }
}

Animations Performance Improvements

Long Term Support (LTS)


We are expanding our Long Term Support to all major releases.

How to update to 6.0.0


https://update.angular.io/
The update generally follows 3 steps, and will take advantage of the new ng update tool.

1. Update @angular/cli

2. Update your Angular framework packages

3. Update other dependencies

@angular/core now depends on

1. TypeScript 2.7
2. RxJS 6.0.0
3. tslib 1.9.0

@angular/platform-server now depends on Domino 2.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

Lazy loading without router:


"options": {
[…],
"lazyModules": [
"src/app/creditcard/creditcard.module"
]
}

Ivy renderer

A rewrite of the renderer, code-named Ivy, has also been


getting a lot of attention lately. The new renderer should be
significantly smaller, which will allow for a smaller final app’s
bundle size. A stable version is not available just yet, but it
will be made available as an opt-in replacement when the API
is complete and stable.

Running ng update

You can now run ng update for the CLI, Angular core and
Angular Material.

First, updating the CLI will convert the configuration file to


the new format (angular.json) and update various project
configs:
$ ng update @angular/cli

Next, run ng update for the Angular core packages:


$ ng update @angular/core

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.

You can install the package globally:


$ npm i -g rxjs-tslint

You might also like