Angular报错NullInjectorError: No provider for ShowHideService怎么解决

错误原因 #

你在重置密码组件的模板里使用了showHideInput、showHideTrigger、showHideStatus这三个密码显隐相关的自定义指令，这些指令的运行依赖ShowHideService服务，当前Angular依赖注入容器中没有注册该服务，因此触发空注入器报错。

解决步骤 #

1. 导入对应功能模块 #

你使用的密码显隐能力大概率来自ngx-show-hide-password第三方库，首先找到声明了ResetPassword组件的Angular模块（一般是当前功能模块或者根模块AppModule），在模块文件头部导入对应的功能模块：

import { ShowHideModule } from 'ngx-show-hide-password';

然后在@NgModule的imports数组中添加ShowHideModule，示例如下：

@NgModule({
  declarations: [
    // 这里是你声明的组件，比如ResetPassword
    ResetPassword
  ],
  imports: [
    // 其他已导入的模块，比如CommonModule、ReactiveFormsModule等
    ShowHideModule
  ]
})
export class YourFeatureModule { }

2. 自定义服务/指令场景的解决方案 #

如果密码显隐的相关指令和服务是你自己封装的，可选择任意一种方式注册服务：

• 方式1：在ShowHideService的@Injectable装饰器中配置全局注册：

@Injectable({
  providedIn: 'root'
})
export class ShowHideService { }

• 方式2：在声明ResetPassword组件的模块的providers数组中添加服务：

@NgModule({
  providers: [ShowHideService]
})
export class YourFeatureModule { }

其他代码问题补充 #

你提供的ResetPassword组件代码还有几个可修复的问题，避免后续运行报错：

• 模板中同时使用了formControlName和[(ngModel)]，Angular 6+已不推荐响应式表单和模板驱动表单混用，建议去掉[(ngModel)]相关绑定，直接通过响应式表单的resetPasswordForm控制值即可
• resetPassword方法中conPasswordCtrl的验证器配置多了一个多余的逗号，修正为：

conPasswordCtrl:['', [Validators.required, Validators.minLength(6)]]

• 模板中调用的getErrorPassword、setRandomPassword、passwordValue、Back四个方法没有在组件类中定义，需要补充对应的实现逻辑
• 你的两个密码输入框都绑定了同一个numbers变量，会导致两个输入框的值同步变化，不符合确认密码的逻辑，建议分开绑定。

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