如何使angular2模块（ngModule）可配置

Question

Assuming that we have a module which does some authentication stuff in it.

I want to set some variables while adding the module to the project.

I've seen that the routing module does something similar with the function forRoot(routes) .

So I tried the same but it kind a feels not correct.

My authentication module (should be configurable)

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [],
  providers: []
})
export class AuthenticationModule {
  static forRoot(authMode: AuthMode) {
    return {
      ngModule: AuthenticationModule,
      providers: [
        {
          useValue: authMode,
          provide: AuthMode
        },
        {
          provide: AuthenticationGuard,
          useFactory: authFactory,
          deps: [AuthMode, Router]
        }
      ]
    }
  }
}

export function authFactory(authMode: AuthMode, router: Router) {
  return new AuthenticationGuard(authMode, router);
}

AuthMode is just a enum holding a value, to compare the selected mode later on in the AuthenticationGuard .

My app.module.ts adds the module like this:

@NgModule({
  declarations: [ // some stuff ]
  imports: [
    BrowserModule,
    // ... some other stuff
    AuthenticationModule.forRoot(AuthMode.OAuthLocalStorage)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

The AuthenticationGuard injects the authMode by value like this:

@Injectable()
export class AuthenticationGuard implements CanActivate {
  public storage: Storage;

  constructor(@Inject(AuthMode) authMode, private router: Router) {
    console.log('selected authMode is ', AuthMode[authMode]);
}

This works fine when using the guard with the routes and canActivate property. But once I inject it to some other service (inside another module), I get this error:

Error: Invalid provider for the NgModule 'AuthenticationModule' - only instances of Provider and Type are allowed, got: [?undefined?, ...] at SyntaxError.ZoneAwareError

So my basic question would be:

• Is this the way how to make a ngModule configurable
• And what would solve the problem above?

Build with Angular 2 and angular-cli (beta 25)

Answer 1

What about storing the setting in a special variable and using a factory to inject it?

let authModeSetting: AuthMode;

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    {
      useFactory: () => authModeSetting,
      provide: AuthMode
    },
    AuthenticationGuard
  ]
})
export class AuthenticationModule {

  static forRoot(authMode: AuthMode) {
    authModeSetting = authMode;

    return AuthenticationModule;
  }

}