Question

我一直在尝试用角度2来解决一个奇怪的问题，它没有检测到我的提供者声明，但没有任何工作。我甚至无法在plunkr中复制它。

我正在使用角度2 rc 3与路由器3.0 alpha.8。

错误讯息为：ORIGINAL EXCEPTION: No provider for 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.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() { }

}

应用程序/注册时/签up.component.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?');
  }


}

应用程序/共享/ test.service.ts：

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

@Injectable()
export class TestService {

  constructor() { }

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

}

所以，我在基础组件（app.component.ts）中提供了测试服务，因为我希望我的所有组件都能访问同一个实例。但是，当我导航到注册时，我得到了没有提供testservice错误的提供程序。如果我在注册组件中提供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() { }

}

但是，我需要在我的应用程序中访问相同的实例，所以如何在主要组件级别注入？

我甚至尝试复制这个app级服务，提供plunkr与所有版本的相同版本，但它似乎没有给我同样的错误......

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

Answer 1

在chrome.browserAction.onClicked.addListener(function(activeTab) { chrome.tabs.create({url: chrome.runtime.getURL('newtab.html')}); }); chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if(request.src === 'blanksite') { sendResponse({action: 'changeColor'}); } });级别注入某些内容已在app中完成：

bootstrap：

main.ts

Answer 2

致所有未来的读者 - 这对于角度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)

这对于分层注入以正确定位和识别提供者至关重要。

此外，这非常重要 - 如果仍然遇到问题并且您正在使用TypeScript或任何其他已翻译的语言 - 删除您的转换器为有问题的对象图中的每个关联类生成的任何工件 - 这个，OP的答案最终有助于我的情况（* .map.js和* .js文件被删除并重新编译）。

Answer 3

对我来说，有些提及＆＃34;服务＆＃34;文件夹是＆＃34;服务＆＃34;。当我把它们全部制作成服务＆＃34; （小写），它有效。

例如：

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

没有用，但这很有效：

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

Answer 4

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

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

奇怪的是其他所有工作，直到我尝试使用分层依赖注入。

Angular 2 - 没有服务提供者

4 个答案: