Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular 2 Offline Compiler
Search
Shuhei Kagawa
May 20, 2016
Programming
0
5.4k
Angular 2 Offline Compiler
ng-sake #3
http://ng-sake.connpass.com/event/30746/
Shuhei Kagawa
May 20, 2016
Tweet
Share
More Decks by Shuhei Kagawa
See All by Shuhei Kagawa
Profiling Node.js apps on production
shuhei
0
890
Building a Pixel Art Editor with Elm
shuhei
1
790
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
170
Draw Animated Chart on React Native
shuhei
0
8.8k
Weird Attractors
shuhei
0
870
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
160
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
110
Is Xcode slowly dying out in 2025?
uetyo
1
260
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
410
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
600
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
2.2k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
190
RailsGirls IZUMO スポンサーLT
16bitidol
0
170
CursorはMCPを使った方が良いぞ
taigakono
1
240
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
750
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
270
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
Designing for humans not robots
tammielis
253
25k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Thoughts on Productivity
jonyablonski
69
4.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Code Reviewing Like a Champion
maltzj
524
40k
Embracing the Ebb and Flow
colly
86
4.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
250
Transcript
Angular 2 Offline Compiler @shuheikagawa
→ GitHub/Qiita @shuhei → Twitter @shuheikagawa → Software Engineer @
M3, Inc
Angular 2 & Me TypeScript-ish type annotations and decorators in
ES2015+ → babel-angular2-app → babel-preset-angular2 → babel-plugin-angular2-annotations
Compiler in JavaScript?
Template -> JS
Angular 1 Runtime compilation was the bottleneck
Angular 2 Compiles only once at the boot time
Can we do better?
Offline Compiler → Faster bootstrap → Smaller lib
Let's try!
$ npm i -D @angular/compiler-cli $ ./node_modules/.bin/ngc -p tsconfig.json
$ ls -l src app.css app.css.shim.ts app.ngfactory.ts app.ts main.ts
main.ts
import { coreBootstrap, ReflectiveInjector } from '@angular/core'; import { browserPlatform,
BROWSER_APP_STATIC_PROVIDERS } from '@angular/platform-browser'; import {AppNgFactory} from './app.ngfactory'; const appInjector = ReflectiveInjector.resolveAndCreate( BROWSER_APP_STATIC_PROVIDERS, browserPlatform().injector ); coreBootstrap(appInjector, AppNgFactory);
./node_modules/.bin/tsc -p tsconfig.json
Doesn't Work
→ o compiler_cli/integrationtest → x angular2-seed → x router-deprecated →
x router
None
What's .ngfactory.ts?
app.ts @Component({ selector: 'app', template: 'hello {{name}}' }) class App
{ name: string = 'ng2'; }
app.ngfactory.ts class _View_App0 extends DebugAppView<any> { createInternal() {} detectsChangeInternal() {}
} function viewFactory_App0(...): AppView<any> {} class _View_App_Host0 extends DebugAppView<any> { createInternal() {} } function viewFactory_App_Host0(...): AppView<any> {} export const AppNgFactory: ComponentFactory<App> = new ComponentFactory<App>('app', viewFactory_App_Host0, App);
createInternal
createInternal(rootSelector: string): AppElement { var parentRenderNode =this.renderer .createViewRoot(this.declarationAppElement.nativeElement); this._text_0 =
this.renderer .createText(parentRenderNode,'',this.debug(0,0,0)); this._expr_0 = import3.uninitialized; this.init([],[this._text_0],[],[]); return null; }
createInternal → create elements, texts and directives → set up
listeners → set up subscriptions → call child views
detectChangesInternal
detectChangesInternal(throwOnChange: boolean): void { this.detectContentChildrenChanges(throwOnChange); this.debug(0,0,0); var currVal_0: any =
import4.interpolate(1,'Hello World ',this.context.user,''); if (import4.checkBinding(throwOnChange,this._expr_0,currVal_0)) { this.renderer.setText(this._text_0,currVal_0); this._expr_0 = currVal_0; } this.detectViewChildrenChanges(throwOnChange); }
detectChangesInternal → detect changes → update DOMs → call child
views
Benefits → Shorter bootstrap time → JS size: compiler and
platform-browser-dynamic vs *.ngfactory.ts → Type-check your templates!
Notes → Don't check in generated files → TypeScript 1.8:
generate in src → TypeScript 1.9: use rootDirs → Expect a build system plugin instead of the CLI
Stay tuned!
fin