Lesson 31 / 32
Building for Production
Package an Angular app with ng build, ahead-of-time compilation, tree-shaking and minification.
ng build
ng build compiles, minifies, and bundles the app into static files under dist/, ready to serve from any static host.
ng build
# output goes to dist/my-app/What production mode does
A production build enables ahead-of-time (AOT) compilation, tree-shaking, and minification — smaller bundles and faster startup than the dev server.
Quick check: What command packages an Angular app for deployment?
- ng serve
- ng build
- ng test
- ng generate
Answer
ng build — `ng build` produces optimized static files in `dist/`, while `ng serve` is only for local development.
Final quiz 1 of 8
Final quiz
Quick check: What does a standalone component use to declare dependencies?
- An NgModule
- The providers array only
- The imports array
- A global script
Answer
The imports array — Standalone components import what they use directly.
Final quiz 2 of 8
Final quiz
Quick check: Which syntax binds a DOM property to a value?
- (event)="fn()"
- {{ }} only
- #ref
- [property]="value"
Answer
[property]="value" — Square brackets bind component data to the DOM.
Final quiz 3 of 8
Final quiz
Quick check: What must @for include?
- A track expression
- An @empty block
- A pipe
- A service
Answer
A track expression — track lets Angular update the DOM efficiently.
Final quiz 4 of 8
Final quiz
Quick check: How do you read a signal named count?
- count.value
- count()
- count.get()
- count[0]
Answer
count() — Signals are read by calling them like functions.
Final quiz 5 of 8
Final quiz
Quick check: Where should you unsubscribe or clear timers?
- ngOnInit
- constructor only
- ngOnDestroy
- ngOnChanges
Answer
ngOnDestroy — ngOnDestroy runs when the component is removed.
Final quiz 6 of 8
Final quiz
Quick check: What is the benefit of lazy loading routes?
- Faster typing
- More modules
- No router
- A smaller initial bundle
Answer
A smaller initial bundle — Components load only when visited.
Final quiz 7 of 8
Final quiz
Quick check: Which form approach builds the model in TypeScript?
- Reactive forms
- Template-driven forms
- Inline styles
- Pipes
Answer
Reactive forms — FormGroup and FormControl define the model explicitly.
Final quiz 8 of 8
Final quiz
Quick check: What does hydration avoid after server-side rendering?
- Sending HTML
- Rebuilding the DOM from scratch
- Using HTTP
- Routing
Answer
Rebuilding the DOM from scratch — Hydration reuses server-rendered DOM and attaches listeners.