Angular 2 AOT "Expression form not supported" error

1
votes

In Angular 2 I would like to use the hash strategie only for IE9. For that I configure the router to use the hash strategy only if I detect the IE9 browser.

This was working when compiling with tsc:

const useHash: boolean = (typeof window.history.pushState) !== 'function';

@NgModule({
  declarations: [AppComponent],
  imports: [
    RouterModule.forRoot(appRoutes, {initialNavigation : false, useHash : useHash})
  ]
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

However the ngc compiler (AOT compilation) does not accept it. The following error is thrown by ngc (on the const declaration line).

Error encountered resolving symbol values statically. Expression form not supported

I have also tried (based on this article: https://medium.com/@isaacplmann/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5#.h4pnszi13):

@NgModule({
  declarations: [AppComponent],
  imports: [
      RouterModule.forRoot(appRoutes, {initialNavigation : false, useHash : AppModule.useHash})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  static useHash: boolean = (typeof window.history.pushState) !== 'function';
}

But I get the same error (on the provider line this time). Note that it works if I do static useHash: boolean = false;.

How can I solve the issue for the module declaration?

2
angularangular2-aot

2 Answers

0
votes

If you just export the useHash function (from the first code snippet) it should work. See the code snippet bellow:

export function useHash() {
  return (typeof window.history.pushState) !== 'function';
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    RouterModule.forRoot(appRoutes, {initialNavigation : false, useHash : useHash})
  ]
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
0
votes

The problem you have is indeed strange, the AOT compiler is a bit limited in getting the full picture because of TS limitation that should be solved soon.

You can track this issue for updates https://github.com/angular/angular/issues/13138

To workaround your issue you just need to play a little trick on the angular compiler...

const rConfig = { useHash: true, preloadingStrategy: PreloadAllModules };
rConfig.useHash = (typeof window.history.pushState) !== 'function';


@NgModule({
  declarations: [AppComponent],
  imports: [
    RouterModule.forRoot(appRoutes, rConfig)
  ]
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}