设置Angular Core模块-AngularModules

Question

好吧，我正在尝试设置一个Angular Core Module。我已经创建了核心模块，在核心模块中我创建了一个名为Dummy的服务。

src/app/core/dummy.service.ts

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DummyService {
val = 1;
constructor() { 
console.log('*** constructor DummyService');
}
getNext(): number{
this.val++;
return this.val;
}
}

src/app/core/core.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DummyService } from './dummy.service';
@NgModule({
declarations: [],
imports: [CommonModule],
providers: [DummyService]
})
export class CoreModule { }

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { CoreModule } from './core/core.module';

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

src/app/app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'angular-template';

constructor(private dummyService: DummyService) {
this.dummyService.val = 2;
}
}

问题是，我在app.component.ts构造函数中遇到了这个错误

类"AppComponent"的参数"dummyService"没有合适的注入令牌。类型应引用已知的声明。(-992003(app.component.ts(13，37(：无法解析此类型。

Answer 1

当您将服务解压缩为providedIn:'root'时，您不需要将其添加到任何模块的provider部分。

因此，在core.module.ts中，这是不需要的：

providers: [DummyService]

请删除它，然后再试一次，看看这是否是问题所在。

编辑：重要！您错过了在src/app/app.component.ts中导入您的服务，并使用以下内容：

import { DummyService } from '../core/dummy.service';

Answer 2

我将重现并解释错误的原因和解决方案。

如果您的DummyService定义没有在应用程序范围的其他地方声明，那么以下内容应该有效。

import { Component, VERSION } from '@angular/core';
import { DummyService } from './dummy.service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'angular-template';

constructor(private dummyService: DummyService) {
this.dummyService.val = 2;
}
}

再现错误

Error in src/app/app.component.ts (12:23)
No suitable injection token for parameter 'dummyService' of class 'AppComponent'.
Consider using the @Inject decorator to specify an injection token.

(当在被注入的类的构造函数中使用的类型被检测为基元类型时，会发生上面记录的错误：string、number、Object等(

再现错误的代码示例

在应用程序组件中声明接口类型(甚至类(DummyService，而不声明或导入服务，如图所示：

import { Component, VERSION } from '@angular/core';
//import { DummyService } from './dummy.service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
constructor(private dummyService: DummyService) {
this.dummyService.val = 2;
}
}
export interface DummyService {
val: number;
}

代码最可能的问题是DummyService已经在应用程序中声明了！

即使Core模块中的providers阵列中省略了DummyService，也会出现上述错误，并出现在常见注入错误之前(见下文(。

接下来，将DummyService添加到Core模块中的providers数组中。

从providers阵列中排除服务将导致以下错误：

ERROR
Error: R3InjectorError(AppModule)[DummyService -> DummyService -> DummyService]:
NullInjectorError: No provider for DummyService!

此处记录的上述错误指的是注入类缺少提供程序。

要解决上述问题，只需删除DummyService的现有非服务声明，然后将服务类添加到CCD_ 21模块中的CCD_。