Why is my provider/service not found?

Question

From what I can tell, I have followed the docs to create a CoreModule to provide my services in Angular 2.0.0. I also tried the suggestions from:

Provide core singleton services module in Angular 2

Angular2 RC5 ngModule: No Provider For NameService

To no avail. What is required to get services "wired up"? The error I am getting with the below code is:

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 (I think this is where the error points to)

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

The sign in component is in a feature module (SignInModule) but that is imported in the app module. I tried using forRoot in CoreModule but it seemed to have no effect. I couldn't get the SystemJS aliases working as suggested in the other question but am unsure why that would fix anything anyways.

Not using a CoreModule and putting the providers directly on AppModule doesn't work either. I haven't put them directly on the components as it is my understanding that it is bad practice. The sign-in component/module is not lazy loaded as far as I can tell, and it isn't part of the router (it is in the app component template).

Where is my error, or alternatively, what should I be doing differently?

Answer 1

You have to add providers inside your signin.module.ts for SignalRService, AuthService and UserSettingsService.

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

Or you have to create one shared module which is having providers declaration for SignalRService, AuthService and UserSettingsService and you have to import this shared module inside your all other module.

//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 { }