Microsoft
Senior Cloud Advocate
Wassim Chegham
Klingon
(author)
xLayers.dev
(author)
Angular Core Team
Compodoc
(co-author)
Universal
(former member)
angular console
(former member)
ngx.tools
(author)
Node.js Foundation Invited Member
Building a better Developer Experience:
Angular 6—7—8
Angular Ecosystem!
npm install -g @angular-devkit/schematics-cli
schematics blank --name=foo
CREATE /foo/README.md (639 bytes)
CREATE /foo/.gitignore (191 bytes)
CREATE /foo/.npmignore (64 bytes)
CREATE /foo/package.json (540 bytes)
CREATE /foo/tsconfig.json (656 bytes)
CREATE /foo/src/collection.json (205 bytes)
CREATE /foo/src/foo/index.ts (310 bytes)
CREATE /foo/src/foo/index_spec.ts (456 bytes)
ng new my-foo-app && cd $_
npm link /path/to/foo
schematics <path>:<schematic> --<option>=<value>
# schematics .:foo --tests=false
"
import {
BuilderOutput,
createBuilder
} from '@angular-devkit/architect';
export default createBuilder((options, context) => {
return new Promise<BuilderOutput>(resolve => {
resolve({ success: true });
});
});
{
"builders": {
"command": {
"implementation": "./command",
"schema": "./command/schema.json",
"description": "Runs any command line in the operating system."
}
}
}
{
"name": "@example/command-runner",
"version": "1.0.0",
"description": "Builder for Architect",
"builders": "builders.json",
"devDependencies": {
"@angular-devkit/architect": "^1.0.0"
}
}
{
"projects": {
"builder-test": {
"architect": {
"touch": {
"builder": "@example/command-runner:command",
"options": {
"command": "touch",
"args": [
"src/main.ts"
]
}
},
}
}
}
}
ng run @command-runner:command
"
ng commands & flags,
Node Version,
Build Time & Errors,
RAM & CPU usage,
Artifacts size...
# ./src/browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11
# ./tsconfig.json
{
"compilerOptions": {
"target": "es2015"
}
}
<!-- For modern browsers -->
<script type="module" src="polyfills-es2015.js"></script>
<script type="module" src="runtime-es2015.js"></script>
<script type="module" src="style-es2015.js"></script>
<script type="module" src="vendor-es2015.js"></script>
<script type="module" src="main-es2015.js"></script>
<!-- For Legacy browsers -->
<script nomodule src="polyfills-es5.js"></script>
<script nomodule src="runtime-es5.js"></script>
<script nomodule src="style-es5.js"></script>
<script nomodule src="vendor-es5.js"></script>
<script nomodule src="main-es5.js"></script>
Bazel isn't replacing Webpack nor the CLI.
Android, C & C++, C#, D, Docker, Go, Groovy, Kotlin, iOS, Java, JavaScript, Jsonnet, Objective, OCaml, C, Proto Buffers, Python, Rust, Sass, Scala, Shell, TypeScript, etc...
@angular/core/**/*.{ts,js}
ts_library(), ng_package(),...
./bundles/core.umd.js
ts_library()
typescript compiler
tsc
compilation
# For new apps
npm install -g @angular/bazel
ng new my-app --collection=@angular/bazel
# For existing apps
ng add @angular/bazel
ng new shiny-ivy-app --enable-ivy
import {
Component
} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>{{ title }}</h1>
`
})
export class AppComponent {
title = 'ivy';
}
import * as tslib_1 from "tslib";
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
var AppComponent = /** @class */ (function () {
function AppComponent() {
this.title = 'ivy';
}
AppComponent.ngComponentDef = i0.ɵdefineComponent({
type: AppComponent,
selectors: [["app-root"]],
factory: function AppComponent_Factory(t) {
return new (t || AppComponent)();
},
consts: 2,
vars: 1,
template: function AppComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵelementStart(0, "h1");
i0.ɵtext(1);
i0.ɵelementEnd();
} if (rf & 2) {
i0.ɵtextBinding(1, i0.ɵinterpolation1("", ctx.title, ""));
}
}, encapsulation: 2
});
AppComponent = tslib_1.__decorate([
Component({
selector: 'app-root',
template: "\n\t<h1>{{ title }}</h1> \n "
})
], AppComponent);
return AppComponent;
}());
export { AppComponent };
36kb
7.3kb
2.7kb
Ivy minified
Ivy compressed
Today (compressed – no zone.js)
10kb
Initial target
Angular Elements:
Angular as Custom Elements
Angular
Component
Custom
Element
Angular
Component
Custom
Element
ng generate web-worker app
CREATE tsconfig.worker.json (212 bytes)
CREATE src/app/app.worker.ts (157 bytes)
UPDATE src/tsconfig.app.json (192 bytes)
UPDATE angular.json (3893 bytes)
UPDATE src/app/app.component.ts (593 bytes)
# Before
{
path: 'home',
loadChildren: 'home/home.module#HomeModule'
},
# After
{
path: 'home',
loadChildren: () => import('home/home.module').then(m => m.HomeModule)
},