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