Demystifying AOT compilation in Angular
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
DUDE...
SERIOUSLY
A compiler is a computer program that transforms source code written in a programming language into another computer language [...] The most common reason for converting source code is to create an executable program.
Template Strings
{Parser, Lexer, Tokenizer...}
VM CODE
running application
Compiler
Just-in-time (JIT) compilation, also known as dynamic translation, is compilation done during execution of a program – at run time...
Components
B
U
I
L
D
B
R
O
W
S
E
R
Code Gen
JIT Compilation
VM Code
OR
Ahead-of-time (AOT) compilation is the act of compiling a high-level programming language, into a native machine code with the intention of executing the resulting binary file natively. AOT produces machine optimized code...
Components
B
U
I
L
D
B
R
O
W
S
E
R
Code Gen
AOT Compilation
VM Code
OR
@NgModule({
imports: [
BrowserModule, MdModule,
HttpModule, RoutesModule...
],
declarations: [
HomeComponent, PersonComponent...
],
providers: [ AwesomeService ],
bootstrap: [ AppComponent ]
})// The browser platform with a compiler
import {
platformBrowserDynamic
} from '@angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app.module';
// Compile (JIT) and launch the module
platformBrowserDynamic().bootstrapModule(
AppModule
);
// The browser platform with a compiler
import {
platformBrowser
} from '@angular/platform-browser';
// The generated app factory (AOT)
import {
AppModuleNgFactory
} from './app.module.ngfactory';
// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(
AppModuleNgFactory
);
$ npm install \
@angular/compiler-cli \
@angular/platform-server \
@angular/compiler \
typescript@next --save
$ ./node_modules/.bin/ngc -p tsconfig.aot.json
$ # generates app.module.ngfactory.ts
$ # generates app.component.ngfactory.ts
$ # generates app.component.css.shim.ts
$ # generates ...(example of app.component.ngfactory.ts)
const { AotPlugin } = require('@ngtools/webpack');
const tsconfig = root('./src/tsconfig.browser.json');
module.exports = {
//...
plugins: [
new AotPlugin({
tsConfigPath: tsconfig
})
]
}// bad
providers: [{
provide: UrlSerializer,
useFactory: (xDebugService) => {
return new XUrlSerializer(xDebugService)
},
deps: [XDebugService]
}, ...]Error encountered resolving symbol values statically.
Calling function 'XXXXX', function calls are not supported.
Consider replacing the function or lambda with a reference
to an exported function...
// good
export function setupUrlSerializer(xDebugService) {
return new XUrlSerializer(xDebugService);
}
providers: [{
provide: UrlSerializer,
useFactory: setupUrlSerializer,
deps: [XDebugService]
}, ...]Error encountered resolving symbol values statically.
Calling function 'XXXXX', function calls are not supported.
Consider replacing the function or lambda with a reference
to an exported function...
// bad
@Component({template: `{{ foo }}`})
export class AppComponent {
private foo: any;
}
// good
@Component({template: `{{ foo }}`})
export class AppComponent {
public foo: any;
}Error at /app.component.ngfactory.ts Property 'foobar' is private and only accessible within class 'AppComponent'.
// bad
@Component({})
class AppComponent {}
export default AppComponent;
// good
@Component({})
export class AppComponent {}can't find symbol undefined exported from module app.component.ts
