使用InAppBrowser插件时NgModule提供者及注入错误求助

错误原因分析 #

1. 首次出现的NullInjectorError：Angular无法找到InAppBrowser的依赖提供者，因为未正确注册插件对应的模块。
2. 第二次的无效提供者错误：直接将InAppBrowser类添加到模块providers数组的方式不合法，该插件需通过专属模块完成提供者注册。

正确解决步骤 #

1. 确认安装完成（已执行可跳过） #

已完成以下安装命令，确保依赖正确：

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @awesome-cordova-plugins/in-app-browser 

2. 注册InAppBrowser模块 #

不要在页面模块的providers中直接添加InAppBrowser类，而是导入对应的InAppBrowserModule：

修改cloud-account.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { CloudAccountPageRoutingModule } from './cloud-account-routing.module';
import { CloudAccountPage } from './cloud-account.page';
// 导入插件专属模块
import { InAppBrowserModule } from '@awesome-cordova-plugins/in-app-browser/ngx';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    CloudAccountPageRoutingModule,
    // 将模块添加到imports数组
    InAppBrowserModule
  ],
  // 移除providers中的InAppBrowser
  declarations: [CloudAccountPage]
})
export class CloudAccountPageModule {}

全局注册（可选）

如果需要在整个应用中使用该插件，可在app.module.ts中全局导入模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { InAppBrowserModule } from '@awesome-cordova-plugins/in-app-browser/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    InAppBrowserModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. 页面组件正常使用 #

cloud-account.page.ts的代码无需修改，注入后即可调用插件方法，示例如下：

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import {Title} from "@angular/platform-browser";
import {Strings} from "../../Strings";
import {InAppBrowser} from "@awesome-cordova-plugins/in-app-browser/ngx";

@Component({
  selector: 'app-cloud-account',
  templateUrl: './cloud-account.page.html',
  styleUrls: ['./cloud-account.page.scss'],
})
export class CloudAccountPage implements OnInit {
    strings = new Strings();
    constructor(
        private router: Router, 
        private titleService: Title, 
        private iab: InAppBrowser
    ) {
        this.titleService.setTitle(this.strings.CLOUD_ACCOUNT);
    }

    // 示例：打开外部链接
    openExternalLink() {
        const browser = this.iab.create('https://example.com');
        browser.show();
    }

    ngOnInit() {
    }
}

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