dtom@stibosystems.com
npm install -g @angular/cli
ng new my-project
ng new
ng generate
ng add
ng update
angular material schematics
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
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 hello
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;
},
]);
}
Three new starter components
Tree
Badge
Bottom sheet
Better overlay positioning
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-table
Angular Elements are reusable Custom Elements which can be used any web application.
Cross framework components
Micro frontend architecture
Material components in every environment
Reusable encapsulated widgets
Web component experience
npm install -g @angular/cli
ng new my-element-project
ng add @angular/elements
ng g component my-angular-element -v Native
Ivy...
around 60kB overhead with polyfills but...
New, recommended way to register a provider, directly inside the @Injectable() decorator.
@Injectable()
export class MyService {
...
}
@NgModule({
...
providers: [MyService]
})
export class SomeModule { }
@Injectable({
providedIn: 'root'
})
export class MyService {
...
}
vs
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
ng new tricity-lib
ng generate library tricity-custom-library --prefix tcl
ng generate component test --project=tricity-custom-library
ng build tricity-custom-library
ng test tricity-custom-library
Third attempt to Renderer focused on further speed improvements, size reduction, and increased flexibility.
Reduced build size
Improved treeshaking
Increased generated code readability
Simpler code
Backward compatibility
// 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);
vs
Speed for large apps
Decentralization
Customizability with less configuration
Scalability
Speed for incremental builds
Support for other languages
Smaller configuration files
brew install bazel
npm install -g @bazel/ibazel
bazel run :install
ibazel run src:devserver
6.0 versioning
RxJs 6
Typescript 2.7
ElementRef<T>
Animations improvements
<input [(ngModel)]="some.model" [formControl]="someCtrl">