Angular中bs-stepper组件异常，报NullInjectorError无提供者错误

错误根源 #

你的代码存在几个核心问题引发报错：

• import Stepper from 'bs-stepper';写在了组件类内部，Angular会将其识别为类属性并尝试依赖注入，但Stepper并非Angular服务，因此触发NullInjectorError。
• 生命周期钩子名称拼写错误：NgOnInit需改为小写开头的ngOnInit。
• 冗余的DOMContentLoaded监听：Angular的ngOnInit钩子执行时，组件对应的DOM已经完成渲染，无需额外监听。

修复后的组件代码 #

// 将import移至文件顶部
import Stepper from 'bs-stepper';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-file-upload-process',
  templateUrl: './file-upload-process.component.html',
  styleUrls: ['./file-upload-process.component.css']
})
export class FileUploadProcessComponent implements OnInit {
  // 用ViewChild获取步进器DOM元素
  @ViewChild("stepperProcess") stepperProcess!: ElementRef;
  stepper!: Stepper;

  ngOnInit(): void {
    // 直接初始化步进器
    this.stepper = new Stepper(this.stepperProcess.nativeElement);
  }

  // 实现步进器跳转方法
  next(): void {
    this.stepper.next();
  }

  onSubmit(): void {
    // 自定义表单提交逻辑
    console.log('表单提交完成');
  }
}

依赖环境验证 #

确保已安装bs-stepper及依赖的Bootstrap：

npm install bs-stepper

若项目未引入Bootstrap样式，需在angular.json中添加资源引用：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/bs-stepper/dist/css/bs-stepper.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
  "node_modules/bs-stepper/dist/js/bs-stepper.min.js"
]

核心优化说明 #

• import语句必须放在组件类外部，遵循ES6/TypeScript语法规范，避免Angular误判为依赖注入项。
• 使用ViewChild获取DOM元素是Angular组件化开发的标准方式，比document.querySelector更可靠，能避免DOM查找失败问题。
• 必须实现next方法，否则点击按钮会触发未定义方法错误。

内容的提问来源于stack exchange，提问作者Sathishkumar