What's new in Angular in 2018
dtom@stibosystems.com
v6
How to try ?
npm install -g @angular/cli
ng new my-projectUpdate
Schematics
Angular Material
Angular elements
Providers
CLI Workspace
Schematics
What is it ?
ng new
ng generate
ng add
ng update
angular material schematics
Built in schematics
What do we get?
Schematics which generate boilerplate and examples of use have a huge potential to shorten learning curve for new developers joining any existing project
easily introduce and enforce project wide conventions
new projects scaffolding
adjusting existing schematics to project
How to try ?
npm install -g @angular-devkit/schematics-cli
schematics blank --name=my-schematics
schematics .:my-schematics
npm link ../my-schematics
ng g my-schematics:my-schematics hellong update
ng add
custom schematics
Calling external schematic
export function myComponent(options: any): Rule {
return chain([
externalSchematic('@schematics/angular', 'component', options),
(tree: Tree, _context: SchematicContext) => {
// Our actions with external schematic output
return tree;
},
]);
}Real world example
Angular Material
Three new starter components
What do we get?
Tree
Badge
Bottom sheet
Better overlay positioning
How to try ?
ng add @angular/material
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-tableHow to use Angular Material Schematics ?
Angular Elements
What is it?
Angular Elements are reusable Custom Elements which can be used any web application.
What do we get ?
Cross framework components
Micro frontend architecture
Material components in every environment
Reusable encapsulated widgets
Web component experience
How to try ?
npm install -g @angular/cli
ng new my-element-project
ng add @angular/elements
ng g component my-angular-element -v NativeSize
Ivy...
around 60kB overhead with polyfills but...
Example
Tree shakeable providers
What is it ?
New, recommended way to register a provider, directly inside the @Injectable() decorator.
How to try ?
@Injectable()
export class MyService {
...
}
@NgModule({
...
providers: [MyService]
})
export class SomeModule { }@Injectable({
providedIn: 'root'
})
export class MyService {
...
}
vs
Example
CLI Workspace and Libraries
What is it ?
ng new now generates a workspace with a default application. Additional apps can be added to a workspace, making it possible to have multiple apps under one project.
angular-cli.json is replaced by angular.json
How to try ?
ng new tricity-lib
ng generate library tricity-custom-library --prefix tcl
angular.json
Generate component for specific lib
ng generate component test --project=tricity-custom-library
Build specific lib
ng build tricity-custom-libraryHow to use it ?
Testing
ng test tricity-custom-library
Easy...
More...
Ivy Renderer
What is it ?
Third attempt to Renderer focused on further speed improvements, size reduction, and increased flexibility.
Reduced build size
Improved treeshaking
Increased generated code readability
What do we get ?
Simpler code
Backward compatibility
How to try ?
// 1) Remove BrowserModule from app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// 2) add enableIvy to tsconfig.app.json
"angularCompilerOptions": {
"enableIvy": true
}
// 3) modify bootstrap code in main.ts
import { ɵrenderComponent as renderComponent } from '@angular/core';
// platformBrowserDynamic().bootstrapModule(AppModule)
// .catch(err => console.log(err));
renderComponent(<any>AppComponent);Reduced build size
vs
Example
Bazel
What is it?
What do we get ?
Speed for large apps
Decentralization
Customizability with less configuration
Scalability
Speed for incremental builds
Support for other languages
Smaller configuration files
How to try ?
brew install bazel
npm install -g @bazel/ibazel
bazel run :install
ibazel run src:devserver
Angular 6 will use Bazel as default build tool
ng eject
Even more...
LTS
6.0 versioning
RxJs 6
Typescript 2.7
Other news
ElementRef<T>
Animations improvements
Deprecated - ngModel in Reactive forms
<input [(ngModel)]="some.model" [formControl]="someCtrl">What's next ?
Thank You !!1
Angular in 2018
By Dariusz Tomaszewski
Angular in 2018
What's going on in Angular in 2018
