设置 Angular 核心模块 - AngularModules

Question

好吧，我正在尝试设置一个 Angular 核心模块。我已经创建了核心模块，并在核心模块中创建了一个名为 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.

（当被注入的类的构造函数中使用的类型被检测为原始类型时，会出现上述错误here：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!

上面记录的错误here 指的是注入类的缺失提供程序。

要纠正上述问题，只需删除DummyService 的现有非服务声明，然后 将服务类添加到Core 模块中的providers 数组中。