Javascript 在组件中无法访问Angular 2提供程序

我对angular 2是新手。我正在关注遗留的快速启动应用程序《英雄之旅》

我创建了应用程序中提到的服务

我有一个服务。用于提取所有英雄数据

我已将HeroService包含在app.module文件中作为提供程序，以便能够通过整个应用程序对所有应用程序进行访问

我的app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent }  from './app.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroesComponent }  from './heroes.component';
import { HeroService }  from './hero.service';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'heroes',
        component: HeroesComponent
      }
    ])
  ],
  declarations: [ AppComponent, HeroesComponent, HeroDetailComponent ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

我想访问HeroService以获取数据的组件文件是：

export class HeroesComponent implements OnInit {
    constructor(private heroService: HeroService) { }
}

问题是我在构建项目时遇到了如下错误：

找不到名称“HeroService”

我正确地遵循了所有步骤。如果我在HeroesComponent中导入HeroService，它似乎可以工作。但在未导入时失败。 我错过了一些步骤。据我所知，在app.module上声明提供者将注册它以在整个应用程序/组件中使用，而无需每次导入它

---

如果我在某个地方出错，请更正。

您还需要在组件内部导入

import { HeroService }  from './hero.service';

---

您是否在组件文件中导入了

HeroService

？您是否从

hero.service.ts

文件中导出了

HeroService

类？不，我没有。这是我的查询，如果我需要再次导入，因为我已经在app.module中作为提供者添加了它。我想我们可以不用进口。现在我不认为在app.module中添加它作为提供者有什么意义，因为我们每次都必须导入它。因此，即使我们在app.module中添加了提供者，我们也需要导入它？我认为没有必要，因为我们已经在app.module中将它定义为提供者。谢谢你的及时答复。我之前导入过，但对是否可以避免导入感到困惑。现在我不认为把它作为提供者包含在app.module中有什么意义，因为我们每次都要导入它。只是我们可以避免在组件装饰器中使用提供者密钥。或者我看不到它背后的大局。