Angulaire à 2 Pas de fournisseur de Service

J'ai essayé de résoudre un problème étrange avec angulaire 2 où il ne dtecte pas mon fournisseur de déclaration, mais rien ne fonctionne. Je ne peux même pas le reproduire dans plunkr.

Je suis en utilisant angulaire 2 rc 3 avec routeur 3.0 alpha.8.

Message d'erreur est: ORIGINAL EXCEPTION: No provider for TestService!

app.les itinéraires.ts:

import { provideRouter, RouterConfig } from '@angular/router';

import { HomeComponent } from './app/home/home.component';
import { LogInComponent } from './app/log-in/log-in.component';
import { SignUpComponent } from './app/sign-up/sign-up.component';

export const routes: RouterConfig = [
  { path: '', component: HomeComponent },
  { path: 'log-in', component: LogInComponent },
  { path: 'sign-up', component: SignUpComponent }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

principal.ts:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { enableProdMode } from "@angular/core";

import { AppComponent } from './app/app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';

//enableProdMode();

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

app/app.composante.ts:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TestService } from './shared/test.service';

@Component({
  selector: 'my-app',
  template: `
    <div id="menu">
      <a [routerLink]="['/sign-up']"><button>Sign Up</button></a>
    </div>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES],
  providers: [TestService]
})
export class AppComponent {

  constructor() { }

}

app/inscrivez-vous/inscrivez-vous.composante.ts:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TestService } from '../shared/test.service';

@Component({
  selector: 'sign-up',
  template: `<h1>Sign up!</h1>`,
  directives: [ROUTER_DIRECTIVES]
})
export class SignUpComponent {
  constructor(private testService: TestService) {
    this.testService.test('works?');
  }


}

app/shared/test.service.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class TestService {

  constructor() { }

  test(message: string) {
    console.log(message);
  }

}

Donc, je suis en fournissant les testservice dans le composant de base (app.composante.ts) parce que je veux que tous mes composants pour accéder à la même instance. Cependant, lorsque je navigue à signer-up, j'ai pas de fournisseur pour testservice erreur. Si j'ai la TestService dans le composant, cela fonctionne alors:

import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TestService } from '../shared/test.service';

@Component({
  selector: 'sign-up',
  template: `<h1>Sign up!</h1>`,
  directives: [ROUTER_DIRECTIVES],
  providers: [TestService]
})
export class SignUpComponent implements OnInit {
  constructor(private testService: TestService) { }

  ngOnInit() { }

}

Cependant, j'ai besoin de la même instance accessible tout au long de mon application, alors comment puis-je injecter ce à la principale composante de niveau?

J'ai même essayé de reproduire cette application au niveau de la fourniture de services avec plunkr avec la même version de tout, mais il ne semble pas me donner la même erreur...

http://plnkr.co/edit/5bpeHs72NrlyUITCAJim?p=preview

OriginalL'auteur Daynil | 2016-06-28