为什么找不到我的provider/service?

Why is my provider/service not found?

据我所知,我已经按照 docs 创建了一个 CoreModule 以在 Angular 2.0.0 中提供我的服务。我还尝试了以下建议:

Angular2 RC5 ngModule: No Provider For NameService

无济于事。获得服务需要什么 "wired up"?我使用以下代码得到的错误是:

No provider for AuthService!

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

//Modules/Components
import { AppComponent } from './app.component';
import { SignInModule } from './sign-in/signin.module';
import { CoreModule } from './services/core.module';

@NgModule({
    imports: [BrowserModule, AppRoutingModule, FormsModule,
        CoreModule, SignInModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

services/core.module.ts

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

// Services
import { SignalRService } from './signalr.service';
import { AuthService } from './auth.service';
import { UserSettingsService } from './user-settings.service';

@NgModule({
    providers: [SignalRService, AuthService, UserSettingsService]
})
export class CoreModule {
}

services/auth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { SignalRService } from './signalr.service';
import { ISignInProvider } from '../sign-in/signin.interface';

@Injectable()
export class AuthService {
    constructor(private signalR: SignalRService, private router: Router) {
    }
..
}

sign-in/signin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { GoogleSignInComponent } from './google-signin.component';

@NgModule({
    imports: [CommonModule, FormsModule],
    declarations: [GoogleSignInComponent],
    exports: [GoogleSignInComponent],
})
export class SignInModule { }

sign-in/google-signin.component.ts(我认为这是错误指向)

import { Component, AfterViewInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { ISignInProvider } from './signin.interface';

@Component({
    moduleId: module.id,
    selector: 'google-signin',
    templateUrl: 'google-signin.component.html',
})
export class GoogleSignInComponent implements AfterViewInit, ISignInProvider     {
    constructor(private authService: AuthService) {
    }
}

登录组件 在功能模块 (SignInModule) 中,但它是在应用程序模块中导入的。我尝试在 CoreModule 中使用 forRoot 但它似乎没有效果。我无法让 SystemJS 别名按照另一个问题中的建议工作,但我不确定为什么这会修复任何问题。

不使用 CoreModule 并将提供程序直接放在 AppModule 上也不起作用。我没有将它们直接放在组件上,因为据我所知这是不好的做法。据我所知,登录 component/module 不是延迟加载的,它不是路由器的一部分(它在应用程序组件模板中)。

我的错误在哪里,或者我应该做些什么不同的事情?

您必须在 signin.module.ts 中为 SignalRServiceAuthServiceUserSettingsService 添加提供商。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { GoogleSignInComponent } from './google-signin.component';

@NgModule({
    imports: [CommonModule, FormsModule],
    declarations: [GoogleSignInComponent],
    providers: [SignalRService, AuthService, UserSettingsService],
    exports: [GoogleSignInComponent],
})
export class SignInModule { }

或者您必须创建一个共享模块,其中包含 SignalRServiceAuthServiceUserSettingsService 的提供程序声明,并且您必须将此共享模块导入到所有其他模块中。

//SharedModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { GoogleSignInComponent } from './google-signin.component';

@NgModule({
    imports: [CommonModule, FormsModule],
    providers: [SignalRService, AuthService, UserSettingsService]
})
export class SharedModule { }

//SignInModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { SharedModule } from 'path to SharedModule';
import { GoogleSignInComponent } from './google-signin.component';

@NgModule({
    imports: [CommonModule, FormsModule, SharedModule],
    declarations: [GoogleSignInComponent],
    exports: [GoogleSignInComponent],
})
export class SignInModule { }