Erste Fehler Injektion Service in Wache

Question

Ich mache eine Wache in etwa so:

// MyGuard.ts 
import { Injectable, Component } from '@angular/core'; 
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router'; 

import { MyService } from './services/MyService'; 

@Component({ 
    providers: [MyService] 
}) 

@Injectable() 
export class MyGuard implements CanActivate { 
    constructor(public s : MyService) {} 

    canActivate(next: ActivatedRouteSnapshot, prev: RouterStateSnapshot) { 
    this.s.doSomething(); 
    return true; 
    } 
} 

Der Service ist hier:

// MyService.ts 
import { Injectable } from '@angular/core'; 
import * as _ from 'lodash'; 

@Injectable() 
export class MyService { 
    constructor() { 
    } 

    public doSomething() { 
    return this; 
    } 
} 

Wenn ich die Seite lade ich diesen Fehler:

Error: Uncaught (in promise): No provider for MyService! (MyGuard -> MyService) 

Wenn ich die Zeile im Konstruktor von MyGuard entfernen, wo ich den Dienst

deklariere

... 
export class MyGuard implements CanActivate { 
    constructor() {} // <--- here 
    ... 

Ich kann die Seite ohne Fehler laden. Was mache ich falsch?

Answer 1

Sie müssen den Dienst MyService als Anbieter angeben, wenn Ihre Anwendung Bootstrapping:

bootstrap(AppComponent, [ 
    (...) 
    MyService, MyGuard 
]); 

Answer 2

Sie brauchen nicht den Dienst nur hinzufügen, um es zu erklären, Konstruktor und verwenden Sie dann die Variable dieses

constructor(private myService: MyService) { 
} 

func() 
{ 
this.myService //like this 
} 

mit

und fügen Sie es auch Bootstrap wie folgt hinzu

bootstrap(AppComponent, [ 
    APP_ROUTER_PROVIDERS, 
    MyService 
]).catch(err => console.error(err));