使用routerLink跳转页面时触发NullInjectorError错误求助

错误原因 #

这个NullInjectorError是因为Angular依赖注入系统找不到FileChooser和File的服务提供者。Ionic原生插件需要在对应页面模块中明确注册为依赖提供者，否则组件构造函数注入时无法找到对应实例。同时你的组件代码中插件导入路径缺少/ngx后缀，不符合Ionic 6+的规范，也会导致注入失败。

解决步骤 #

1. 修正组件的插件导入路径 #

修改组件中的导入语句，补充/ngx后缀：

import { Component, OnInit } from '@angular/core';
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { File } from '@ionic-native/file/ngx';
import firebase from 'firebase/compat/app'

2. 在页面模块中注册提供者 #

打开NewFlavorPage对应的模块文件（通常是new-flavor.module.ts），导入插件并在@NgModule的providers数组中添加：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { NewFlavorPageRoutingModule } from './new-flavor-routing.module';
import { NewFlavorPage } from './new-flavor.page';
// 导入插件
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { File } from '@ionic-native/file/ngx';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    NewFlavorPageRoutingModule
  ],
  declarations: [NewFlavorPage],
  // 添加服务提供者
  providers: [FileChooser, File]
})
export class NewFlavorPageModule {}

3. 验证插件安装（可选） #

如果之前未正确安装插件，先执行安装命令：

npm install @ionic-native/file-chooser @ionic-native/file

完成以上操作后重新运行项目，使用routerLink跳转NewFlavorPage时即可解决注入错误。

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