NgModule 提供者不在 Angular 中提供服务

Question

所以我开始学习 Angular 并且刚刚开始研究服务和依赖注入。我创建了一个非常基本的服务，并试图使用提供者来使用组件中的服务。但是，在组件中它给了我错误

找不到名称“CourseService”

快速解决方法是将服务直接导入组件，但我知道这是不好的做法，并且违背了服务和提供者的观点。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CourseService } from './courses.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [CourseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
//import { CourseService } from './courses.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  CList:string[];

  constructor(service: CourseService){
    this.CList=service.getCourses();
  }
}

courses.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CourseService {
  getCourses(){
    return ["course1", "course2", "course3"];
  }
  constructor() {   
  }
}

编辑： 我的印象是直接导入不会使其成为单例，因此会破坏它。显然提供在根处理。

Answer 1

在 app.component.ts 中取消注释这一行：

//import { CourseService } from './courses.service';

顺便说一句，如果你在一个可注入的装饰器中使用带有“root”的 providedIn 属性，你可以从 app.module 提供者数组中删除服务，因为 CoursesService 将作为一个注入已经有单例服务了。

https://angular.io/api/core/Injectable#providedIn