typescript - Angular 2.0.1: router och canActivate-klass fungerar inte: Ingen direktivanteckning hittades på LoginGuard

här är mitt problem med senaste Angular 2 (2.0.1) och angular router : 3.0.1

När jag kör applikationen får jag följande fel: Fel: (SystemJS) Ingen Directive-annotering hittades på LoginGuard(…)

Jag har en router med en canActivate-klass för att kontrollera åtkomst till routen, här är koden:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule  } from '@angular/router';
export const MainWindowRoutes = [
  {
    path: '',
    redirectTo: '/web-portal',
    pathMatch: 'full'
  },
  {
    path: 'web-portal',
    component: MainWindowComponent,
    children: [
      { path: 'device/:id', component: DeviceViewComponent, canActivate: [LoginGuard], pathMatch: 'full' },
      { path: 'location/:id', component: LocationViewComponent, canActivate: [LoginGuard], pathMatch: 'full' },
      { path: 'deviceType/:id', component: DeviceTypeViewComponent, canActivate: [LoginGuard], pathMatch: 'full' },
      { path: 'home', component: WelcomeViewComponent, canActivate: [LoginGuard], pathMatch: 'full' },
      { path: '', component: RouterComponent, canActivate: [LoginGuard], pathMatch: 'full' }
    ]
  }
];
export const LoginRoutes = [
    { path: 'login', component: LoginComponent }
];
export const AUTH_ROUTER_PROVIDERS = [LoginGuard, LoginService];
export const appRoutes: Routes = [
    ...LoginRoutes,
    ...MainWindowRoutes
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Här är loginGuard-klassen:

import { Injectable } from '@angular/core';
import { 
    CanActivate,
    Router,
    ActivatedRouteSnapshot,
    RouterStateSnapshot } from '@angular/router';
import { LoginService } from './login.service';
import { routing } from '../app.routes';

@Injectable()
export class LoginGuard implements CanActivate {


constructor(private loginService: LoginService, private router: Router) { }

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

        console.log('canActivate !!!');

      if (this.loginService.isLoggedIn()) { 
            return true; 
        } else {
            this.router.navigate(['/login']);
            return false;
        }
    }
}

I app.module startar jag upp routern så här:

bootstrap:  (AppComponent, [AUTH_ROUTER_PROVIDERS ])

Men det fungerar inte alls. Injiceringen verkar inte fungera korrekt för canActivate-klassen (LoginGuard).

Snälla hjälp! ;-)

Hälsningar

Svar #1

Okej bra det fungerar nu.

Faktiskt glömde jag att lägga till det i app.module:

leverantörer : [ AUTH_ROUTER_PROVIDERS, appRoutingProviders,...

Förbaskat, det kunde jag inte gissa. Ibland gör refaktorisering koden mer komplex. Inte säker på att det är en bra idé att ha alla leverantörer i app.module... Tack för din hjälp.

Svar #2

Bootstrap-raden är ogiltig. Det borde vara något i stil med:

@NgModule({
  imports: [BrowserModule, ModuleWithProviders],
  providers: [AUTH_ROUTER_PROVIDERS],
  bootstrap: [AppComponent],
  ...
}
export class AppModule {}

// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

Se även

• https://angular.io/docs/ts/latest/guide/router.html
• https://angular.io/docs/ts/latest/guide/ngmodule.html#!#bootstrap