why won't this code compile in AOT mode?

Question

I have a piece of code below, why would it not compile in 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 culprit here is window.hide , what i am not understanding is how come talk.title or talk.speaker gets compiled? Are they not dynamic code?

Is it like anything which is not defined in my application will fail during Aot mode?

Answer 1

AOT requires that all your templates be statically analyzable. In other words, you can understand exactly what other components/directives/pipes/bindings the template is using simply by looking at the code without running it. In the example given, you don't know what the template would be because the actual template string for the component depends on a value (window.hide) that is only known when you run the code.