Поставщики маршрутизации приложений не найдены угловыми 2 - внедрить службу, прежде чем canactivate()

Question

Я пытаюсь внедрить сервисы в мои приложения angular 2, однако сервис не определен, когда я вызываю canactivate() в angular/router . Как я могу внедрить сервис до вызова canactivate(). введите описание изображения здесь

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;
  }
}

app.module.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 {
}

Answer 1

Вам нужно будет выставить свои маршруты как moduleпопробуй это:

const appRoutes: Routes =
[
    {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuardService] // <- no quotes
    },
    {
        path: 'login',
        component: LoginComponent,
        outlet: 'popup'
    },
    // otherwise redirect to home
    {path: '**', redirectTo: ''}
];
@NgModule
({
  imports:   [ RouterModule.forRoot(appRoutes)],
  exports:   [ RouterModule],
  providers: [ AuthGuardService ] // <- provide guard
})
export class AppRoutingModule {}

тогда в вашем AppModule

@NgModule({
    declarations: [],
    imports: [ AppRoutingModule ] // <- import module here
    providers: [
        appRoutingProviders,
        ...AUTH_PROVIDERS,
        AuthService,
        // AuthGuardService, // <- no need for this
        HttpService,
        {
            provide: AuthHttp,
            useFactory: AuthHttpServiceFactory,
            deps: [Http, RequestOptions]
        },
        IndicesEffectsService,
        DialogServiceService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}