Trade-offs

Since AOT is so advantageous, we recommend to use it in production. But, as with everything, there are trade-offs. For Angular to be able to compile your application ahead of time, the metadata has to be statically analyzable. For instance, the following code will not work in the AOT mode:

@Component({
  selector: 'talk-cmp',
  template: () => window.hide ? 'hidden' : `
    {{talk.title}} {{talk.speaker}}
    Rating: {{ talk.rating | formatRating }}
    <watch-button [talk]="talk"></watch-button>
    <rate-button [talk]="talk" (click)="onRate()"></rate-button>
  `
})
class TalkCmp {
  //...
}

The window.hide property will not be defined. So the compilation will fail to point out the error. A lot of work has been done to make the compiler smarter, so it can understand most of the day-to-day patterns you would use when building your application. But certain things will never work, like the preceding example.