应用程序测试返回"NullInjectorError:没有位置提供程序！“_NullInjectorError:没有ActivatedRouteSnapshot提供程序_NullInjectorError:没有BsDropdownConfig提供程序 - 腾讯云开发者社区

问题分析

NullInjectorError: No provider for ***! 是 Angular 框架中常见的错误之一，通常发生在依赖注入（Dependency Injection, DI）过程中。这个错误提示表明 Angular 无法找到某个服务的提供者。

基础概念

依赖注入（DI）：Angular 的依赖注入系统允许组件和服务从容器中获取它们的依赖项。这个系统通过提供者（providers）来注册和获取依赖项。

原因分析

未声明提供者：在模块中没有声明服务的提供者。
作用域问题：服务在组件级别提供，但没有正确地声明在组件的 providers 数组中。
模块导入问题：模块没有正确导入包含服务提供者的模块。

解决方法

1. 在模块中声明提供者

确保在 @NgModule 装饰器的 providers 数组中声明服务。

import { NgModule } from '@angular/core';
import { MyService } from './my.service';

@NgModule({
  declarations: [
    // 组件声明
  ],
  imports: [
    // 模块导入
  ],
  providers: [MyService], // 声明服务提供者
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 在组件中声明提供者

如果服务仅在某个组件中使用，可以在组件的 @Component 装饰器的 providers 数组中声明。

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  providers: [MyService] // 在组件级别声明服务提供者
})
export class MyComponent {
  constructor(private myService: MyService) {}
}

3. 确保模块正确导入

确保包含服务提供者的模块已经正确导入到需要使用该服务的模块中。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyModule } from './my.module';

@NgModule({
  declarations: [
    // 组件声明
  ],
  imports: [
    CommonModule,
    MyModule // 导入包含服务提供者的模块
  ],
  exports: [
    MyModule
  ]
})
export class AnotherModule { }

示例代码

假设有一个 MyService 服务：

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

@Injectable({
  providedIn: 'root' // 在根模块中自动提供
})
export class MyService {
  getData() {
    return 'Hello, World!';
  }
}

在组件中使用该服务：

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private myService: MyService) {}

  ngOnInit() {
    console.log(this.myService.getData());
  }
}