NgModule 提供商未在 Angular 中提供服务

Question

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

找不到名称"CourseService">

快速解决方案是直接将服务导入组件，但我知道这是一种糟糕的做法，违背了服务和提供商的观点。

应用程序模块.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 { }

应用程序组件.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();
}
}

课程服务.ts

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

EDIT:我的印象是，直接导入不会使它成为单例，因此也不会破坏它。显然，提供了In root来处理这一点。

Answer 1

在app.component.ts:中取消注释此行

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

顺便说一句，如果在可注入装饰器中使用providedIn属性和"root"，则可以从app.module providers数组中删除该服务，因为CoursesService将作为单例服务注入。

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