根模块中的Angular 2寄存器服务

我在angular 2方面相对较新，但到目前为止我还是很喜欢：）

当我在根模块级别注册可注入服务时，我没有收到提供程序错误消息：

core.umd.js:3491异常：未捕获（承诺中）：错误：异常：DemoService没有提供程序

但是，当我在根组件中注册相同的服务时，甚至在导入的不同的模块中注册时，一切都正常工作

我是否遗漏了一些东西，或者angular 2 dose不支持根模块上的可注入项？
无论如何，有没有办法克服这个问题，因为我需要将这个服务注入我的router guard类（路由定义上的canAtivate属性）


下面是我使用的示例代码：

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> = [];


非常感谢。请尝试在app.ts中添加AppModule，如下所示

    -----------------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";
      }*/
    }

import { AppModule } from './module';

请分享您的服务代码以及您在哪里使用itI在问题中添加了演示代码。您好，我可以看到您只有一个模块，即AppModule.ts。在新版os angular 2中，您不必为每个组件提供服务，而是向声明组件的模块提供服务。在这种情况下，您需要将其添加到Appmodule.ts文件中，然后使用构造函数注入，就像您已经做的那样，允许angular进行注入。您可以像这样使用提供程序：[//将所有服务放在此处DemoService，]。如果这不是工作比请查克您的版本和更新到最新的。对不起，我不明白什么是失踪？Mu angular版本是2.4，我确实在模块
providers:[DemoService]中注册了我的DemoService，//这行代码不起作用
。你能给我举个例子吗？所以我理解正确。您正在module.ts和appcomponent.ts中添加此服务的提供程序吗？您好，谢谢。我不明白我在做同样的事情（只是用了不同的名字），但它不适合我。另外，请检查组件内以前版本支持提供商的版本，以及新版本在模块上支持它
import { AppModule } from './module';