The main limitation is that
AoT, due to the way it compiles the raw code, cannot be used with common code patterns, for example, default exports from modules, template literals for templates, and functions in providers, routes, or declarations.
AoT Do's and Don'ts
This section explains the cases listed above, and will show how each of them fails and works.
->
arrow-function-exports
Arrow function does not work with AoT when it is passed to an NgModule.
Don't:
export const couterReducer = (state, action: Action) => {
// ...
}
Do:
export function counterReducer(state, action: Action) {
// ...
}
->
control
This is used as a simplest working case.
default-exports
Default exports are not supported with AoT.
Don't:
export default class AppComponent {};
Do:
export class AppComponent {};
-> form-control
Use this.helloForm.controls["greetingMessage"] to retrieve form control is fine.
->
form-control-error
The syntax errors? is not supported by AoT.
Don't:
{{helloForm.controls["greetingMessage"].errors?.minlength}}
Do:
{{helloForm.controls["greetingMessage"].hasError("minlength")}}
->
func-in-routes
Direct use of function in route is not supported by AoT. Either avoid using it or export it from other module.
Don't:
function random() {
return [{
path: "",
component: AppViewComponent
}];
}
const SAMPLE_APP_ROUTES: Routes = random();
Do:
const SAMPLE_APP_ROUTES: Routes = [{
path: "",
component: AppViewComponent
}];
For more details click
here