在根模塊中的角度2註冊服務

Question

我相對較新的角度2，但愛它到目前爲止:)。

當我登記我的根模塊級注射服務，即時得到沒有提供錯誤信息：core.umd.js:3491 EXCEPTION: Uncaught (in promise): Error: EXCEPTION: No provider for DemoService!

但是，當我在根組件，甚至在註冊相同的服務不同進口模塊一切工作正常。

我是否錯過了某些東西，或者可能是角度2的劑量不支持根模塊上的注射劑？ 無論如何，有沒有辦法解決這個問題，因爲我需要將這個服務注入到我的路由器防護類（路由定義的canAtivate屬性）中。

---

下面是一個例子代碼im使用：
DemoService.ts：

@Injectable() 
export class DemoService { 
} 

app.ts：

import { Component } from '@angular/core'; 
import { DemoService } from '../Services/DemoService'; 

@Component({ 
    selector: 'app', 
    // providers: [DemoService], // if I will uncomment this line it will work but I want to register the serivce on the root module level !! 
    templateUrl: 'Templates/app.html' 

}) 
export class AppComponent { 

    constructor(private dSrv: DemoService) { } 

    public name : string = 'Angular !'; 
    public desc: string = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus elit, iaculis quis facilisis id, convallis at mauris. Nunc nisl magna, posuere sit amet ligula viverra, commodo fermentum dolor. Nunc et elit elementum nisi imperdiet venenatis. Proin eu tellus vulputate, tincidunt sem et, semper est. Maecenas volutpat pulvinar nibh non malesuada. Aliquam ex augue, suscipit ut tempor ac, eleifend vitae dolor. Nam scelerisque arcu ligula, id aliquet arcu dignissim sed. Nullam malesuada odio eget justo venenatis laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin malesuada, nunc non porta rhoncus, nibh sapien efficitur velit, sit amet tempor metus quam quis mauris. Proin condimentum non lacus sed rhoncus.'; 
    public arrValues: Array<any> = []; 

Module.ts：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { WSCommonModule } from '../../common/Common-Module' 
import { AppComponent } from './components/app'; 
import { DemoService } from './Services/DemoService'; 

@NgModule({ 
    imports: [BrowserModule, WSCommonModule], 
    declarations: [AppComponent], 
    providers: [DemoService], // this line isnt working 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

---

很多預先感謝。

Answer 1

-----------------app.module.ts--------------- 

    please ingore imports focus on LoginService it is in providers .-- in order to use it in app.component you just need to import it and inject it in the constructor of appcomponent class as show below 

    import { NgModule }  from '@angular/core'; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import { HttpModule, JsonpModule } from '@angular/http'; 
    import {FormsModule, ReactiveFormsModule} from '@angular/forms' 
    import { routing, appRoutingProviders } from './app.routing'; 
    import { AppComponent } from './app.component'; 
    import {PageNotFoundComponent} from './pagenotfound.component'; 
    import { MileStoneModule }   from './milestone/milestone.module'; 
    import { RecepientModule }   from './recepient/routing.module'; 
    import { InformationRequestModule} from './informationrequest/informationrequest.module'; 
    import {CustomCommonModule} from './common/common.module'; 
    import { MaterialModule } from '@angular/material'; 
    import {AppRecepientService} from './app.static.service'; 
    import {LoginService} from './login.service'; 
    import { LoginModule } from './login/login.module'; 
    import { DatepickerModule } from 'angular2-material-datepicker'; 
    @NgModule({ 
     imports: [ 
      BrowserModule, 
      routing,LoginModule, 
      MileStoneModule, RecepientModule,InformationRequestModule, 
      HttpModule, 
      JsonpModule, ReactiveFormsModule, FormsModule 
      ,CustomCommonModule, 
      MaterialModule.forRoot(), 
      DatepickerModule 
     ], 
     declarations: [AppComponent, 
      PageNotFoundComponent, 
     ], 
     providers: [ 
      appRoutingProviders , AppRecepientService , LoginService 
     ], 
     exports:[], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { } 


    ---- app.component.ts ---------------- 

    import { Component , OnInit } from '@angular/core'; 
    import {LoginService} from './login.service'; 
    @Component({ 
     selector: 'app-root', 
     templateUrl: './app.component.html', 
     styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent implements OnInit { 
     title = 'ControlSubmissionClient'; 
     totalMileStones = 0; 
    totalRecepients = 2; 
    isLoggedIn: string; 

     constructor (
     private service: LoginService 
     ) 
     { 
    /* this.service.currentUser.subscribe((val) => { 
     this.isLoggedIn = val; 
      console.log(val); 
     });*/ 

     } 
     ngOnInit() { 
      console.log('init'); 
     } 
     /*onLogin() { 
      //console.log('onLogin from appcpomp'); 
      //this.service.broadcastTextChange("newuser"); 
     }*/ 
     /*private loginSuccess(res: string) { 
     // this.isLoggedIn = "yashn"; 
     }*/ 
    } 

Answer 2

嘗試添加的AppModule在app.ts像下面

import { AppModule } from './module';