Dependency injection 角度2-无服务提供商

我一直在尝试解决angular 2的一个奇怪问题，它没有检测到我的提供者声明，但什么都不起作用。我甚至不能在plunkr中复制它

我正在使用angular 2 rc 3和路由器3.0 alpha.8

错误消息是：

原始异常：TestService没有提供程序

app.routes.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)
];

main.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.component.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() { }

}

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.component.ts）中提供testservice，因为我希望我的所有组件都访问同一个实例。然而，当我导航到注册时，我得到了testservice错误的no provider。如果我在注册组件中提供TestService，那么这将起作用：

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() { }

}

从'@angular/core'导入{Component，OnInit}；
从“@angular/ROUTER”导入{ROUTER_DIRECTIVES}”；
从“../shared/test.service”导入{TestService}；
@组成部分({
选择器：“注册”，
模板：`注册！`，
指令：[路由器指令]，
提供者：[测试服务]
})
导出类SignUpComponent实现OnInit{
构造函数（私有testService:testService）{}
ngOnInit（）{}
}

但是，我需要在整个应用程序中访问相同的实例，那么如何在主组件级别注入该实例呢

我甚至试着用相同版本的东西复制这个为plunkr提供的应用级服务，但它似乎没有给我同样的错误

在
应用程序
级别上注入某些内容是在
引导中完成的：

main.ts
：

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

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS, TestService
])

这毕竟是一个配置问题，而且是一个完全难以捉摸的问题

根据ang2样式指南，我将main.ts从我的主应用程序文件夹中移到了一个文件夹中，并且在
systemjs.config
中，我必须将应用程序的主文件夹声明为
'../main.js'
。当我将主文件移动到根应用程序文件夹并将systemjs中的包声明更改为
'main.js'
时，它起了作用

奇怪的是，在我尝试使用分层依赖注入之前，其他一切都正常工作。
对所有未来的读者来说，这对于angular 2.0.0 rc-4是正确的：

确保遵循以下文件夹结构：

root:
index.html
package.json
systemjs.config.js
tsconfig.json (if using TypeScript) 
typings.json
app (folder):
 - main.js (the root script for your app)
 - app.component.js (the root component for the entire app)
根目录：
index.html
package.json
systemjs.config.js
tsconfig.json（如果使用TypeScript）
typings.json
应用程序（文件夹）：
-main.js（应用程序的根脚本）
-app.component.js（整个应用程序的根组件）
这对于分层注入正确确定提供者的范围和身份至关重要

另外，这非常重要-如果仍然遇到问题，并且您正在使用TypeScript或任何其他传输语言-删除您的传输程序为问题对象图中的每个关联类生成的任何工件-这一点，OP的答案最终对我的情况有所帮助（*.map.js和*.js文件被删除并重新传输）。
对我来说，对“服务”文件夹的一些引用是“服务”。当我将它们全部设置为“服务”（小写）时，它就工作了

例如：

import {ApiService} from "./Services/api.service";

不起作用，但这起作用：

import {ApiService} from "./services/api.service";

是的，我也试过了，但也不起作用。此外：“引导提供程序选项用于配置和覆盖Angular自己的预注册服务，如路由支持。首选方法是在应用程序组件中注册应用程序提供程序。”.检查
类导出
。它显示
自定义提供程序
。它允许任何
@可注入的
。尝试添加
提供程序：[TestService]
into
SignUpComponent
是的，允许在引导中提供，但不是首选。尽管如此，这并不重要，因为它仍然不起作用。此外，在注册组件中添加提供者也可以，但我不能在我的其他组件中使用相同的引用。对于全局服务，在根组件上提供是首选ay根据Angular2风格指南。由于与
APP_初始值设定项
存在某种依赖关系，因此新路由器需要配备引导功能，否则
bootstrap（）
和根组件几乎是等价的。它必须与您的项目配置相关。代码很好，这就是它在Plunker中运行的原因。您认为什么配置可能有问题？如果有帮助，我可以发布我的systemjs配置。我不太了解systemjs，因为我只在本地使用Dart。我会尝试使用angular cli和复制那里的代码位，看看是否有相同的错误。你可以发布你自己问题的答案。然后你可以接受它（在2天的冷却阶段后）这导致这个问题被标记为已回答。哇。我一直在发疯，直到我找到这个。我不明白为什么我的组件无法识别服务的全局注册。直到我找到层次结构。谢谢。嗯。我想这会有所帮助，但仍然。。。
import {ApiService} from "./services/api.service";