Estoy tratando de inyectar servicios en mis aplicaciones angulares 2, sin embargo, el servicio no está definido cuando llamo a canactivate() en angular/router. ¿Cómo puedo inyectar un servicio antes de que se llame a canactivate()? ingrese la descripción de la imagen aquí

app.routing.ts

 const appRoutes: Routes = [ { path: '', component: HomeComponent, canActivate: ['AuthGuardService'] }, { path: 'login', component: LoginComponent, outlet: 'popup' }, // otherwise redirect to home {path: '**', redirectTo: ''} ]; export const appRoutingProviders: any[] = [ {provide: "AuthGuardService", useValue: AuthGuardService} ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

auth.guard.service.ts

 import {Injectable, Inject} from '@angular/core'; import {AuthService} from "./auth.service"; import {Router, CanActivate} from "@angular/router"; import {Observable} from "rxjs"; @Injectable() export class AuthGuardService implements CanActivate { constructor(@Inject(AuthService) private auth, @Inject(Router) private router) { } canActivate() : Observable<boolean> | boolean{ if(this.auth.loggedIn()) { return true; } this.router.navigate([{outlets: {popup: 'login'}}]); return false; } }

aplicación.módulo.ts

 @NgModule({ declarations: [], imports: [ routing ] providers: [ appRoutingProviders, ...AUTH_PROVIDERS, AuthService, AuthGuardService, HttpService, { provide: AuthHttp, useFactory: AuthHttpServiceFactory, deps: [Http, RequestOptions] }, IndicesEffectsService, DialogServiceService ], bootstrap: [AppComponent] }) export class AppModule { }