# Building for Production — Angular Fundamentals: Components, Signals and Routing

Source: https://www.skillbyai.com/en/angular/ng-production-build

> 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.

```bash
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.

**Quiz:** What command packages an Angular app for deployment?

- [ ] ng serve
- [x] 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

**Quiz:** What does a standalone component use to declare dependencies?

- [ ] An NgModule
- [ ] The providers array only
- [x] The imports array
- [ ] A global script

*Answer:* The imports array. Standalone components import what they use directly.

## Final quiz 2 of 8

Final quiz

**Quiz:** Which syntax binds a DOM property to a value?

- [ ] (event)="fn()"
- [ ] {{ }} only
- [ ] #ref
- [x] [property]="value"

*Answer:* [property]="value". Square brackets bind component data to the DOM.

## Final quiz 3 of 8

Final quiz

**Quiz:** What must @for include?

- [x] 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

**Quiz:** How do you read a signal named count?

- [ ] count.value
- [x] count()
- [ ] count.get()
- [ ] count[0]

*Answer:* count(). Signals are read by calling them like functions.

## Final quiz 5 of 8

Final quiz

**Quiz:** Where should you unsubscribe or clear timers?

- [ ] ngOnInit
- [ ] constructor only
- [x] ngOnDestroy
- [ ] ngOnChanges

*Answer:* ngOnDestroy. ngOnDestroy runs when the component is removed.

## Final quiz 6 of 8

Final quiz

**Quiz:** What is the benefit of lazy loading routes?

- [ ] Faster typing
- [ ] More modules
- [ ] No router
- [x] A smaller initial bundle

*Answer:* A smaller initial bundle. Components load only when visited.

## Final quiz 7 of 8

Final quiz

**Quiz:** Which form approach builds the model in TypeScript?

- [x] 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

**Quiz:** What does hydration avoid after server-side rendering?

- [ ] Sending HTML
- [x] Rebuilding the DOM from scratch
- [ ] Using HTTP
- [ ] Routing

*Answer:* Rebuilding the DOM from scratch. Hydration reuses server-rendered DOM and attaches listeners.