Compilation translates TypeScript component code into JavaScript and Angular templates into JavaScript commands that render the UI. The browser executes those commands rather than the original HTML templates. section 9.2.3
Angular uses two compilation modes for different development and deployment needs:
- Run ng serve for just-in-time compilation: Angular starts the application and compiles templates in the browser, favoring faster development builds over runtime performance. section 9.2.3
- Run ng build for ahead-of-time compilation: Angular produces a precompiled application whose browser-executable rendering commands require no HTML templates at runtime. section 9.2.3
Compilation also clarifies server-rendering limitations: browser-oriented code can fail during SSR when it assumes browser objects such as window exist. section 9.2.3
Listing 9.8 AppComponent with content
@Component({
selector: 'app-root',
standalone: true,
imports: [
RouterOutlet,
HeaderComponent,
FooterComponent,
NgOptimizedImage,
RouterOutlet,
RouterLink,
],
template: `
<app-header />
<div class="page">
<div class="cover">
<img ngSrc="./assets/images/cover-picture.jpg"
alt="Cover Picture" width="1900"
height="1000"/> #1
</div>
</div>
<div class="information">
<p>You can learn more about us <a routerLink="about-us">here</a></p>
<p>
Learn about our available subscriptions
<a routerLink="subscriptions">here</a>
</p>
</div>
<div class="container">
<router-outlet /> #2
</div>
<app-footer />
`,
styleUrls: ['./app.component.scss'],
})
export class AppComponent {}
A standalone Angular component template illustrates the declarative input that compilation converts into executable rendering behavior. section 9.2.3
