Угловое обслуживание регистра 2 в корневом модуле

Question

Im относительно новое в угловом 2, но любящее его до сих пор :).

Когда я зарегистрировал свой инъекционный сервис на уровне модуля корня, IM, не получив сообщения об ошибке Поставщика: core.umd.js:3491 EXCEPTION: Uncaught (in promise): Error: EXCEPTION: No provider for DemoService!

Но когда я зарегистрировать ту же услугу в корневом компоненте или даже в другой импортированы модуль все работающ отлично.

Я пропустил что-то или, возможно, угловую дозу не поддерживал инъекции в корневом модуле? В любом случае, есть способ преодолеть это, потому что мне нужна эта услуга, которую нужно ввести в мой класс защиты маршрутизатора (свойство 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';