与离子/电容器的深层链接

Question

我正在尝试使用 Deeplink plugin（授权服务器在成功授权重定向时提供的授权代码）从深层链接检索请求参数到 Ionic 5 应用程序。

Android 意图过滤器似乎配置正确，因为应用程序在成功验证后打开。

我一直有不匹配的深层链接，但出现 plugin_not_installed 错误。

app.module.ts:

import { HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { Deeplinks } from '@ionic-native/deeplinks/ngx';
import { SQLitePorter } from '@ionic-native/sqlite-porter/ngx';
import { SQLite } from '@ionic-native/sqlite/ngx';
import { Vibration } from '@ionic-native/vibration/ngx';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { IonicStorageModule } from '@ionic/storage';
import { ApiModule as NumeraApiModule } from '@lexi-clients/numera';
import { OidcUaaModule } from '@lexi/oidc-uaa';
import { AuthModule, OidcConfigService } from 'angular-auth-oidc-client';
import { environment } from '../environments/environment';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SettingsService } from './settings/settings.service';

export function loadSettings(config: SettingsService) {
  return () => config.load();
}

export function configureAuth(oidcConfigService: OidcConfigService) {
  return () => oidcConfigService.withConfig(environment.authentication.angularAuthOidcClient);
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    AuthModule.forRoot(),
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    NumeraApiModule,
    OidcUaaModule,
    AppRoutingModule,
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadSettings,
      deps: [SettingsService],
      multi: true,
    },
    {
      provide: APP_INITIALIZER,
      useFactory: configureAuth,
      deps: [OidcConfigService],
      multi: true,
    },
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    Deeplinks,
    OidcConfigService,
    SQLite,
    SQLitePorter,
    Vibration,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts:

import { AfterViewInit, Component, NgZone, OnDestroy, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { App, Plugins, StatusBarStyle } from '@capacitor/core';
import { AppCenterCrashes } from '@ionic-native/app-center-crashes';
import { Deeplinks } from '@ionic-native/deeplinks/ngx';
import { NavController, Platform } from '@ionic/angular';
import { LexiUser, UaaService } from '@lexi/oidc-uaa';
import { Observable, Subscription } from 'rxjs';
import { SettingsPage } from './settings/settings.page';
import { SettingsService } from './settings/settings.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements AfterViewInit, OnInit, OnDestroy {

  constructor(
    private platform: Platform,
    private router: Router,
    private idService: UaaService,
    private settings: SettingsService,
    private navController: NavController,
    private deeplinks: Deeplinks,
    private zone: NgZone
  ) {
    this.platform.ready().then(async () => {
      if (this.platform.is('mobile')) {
        const { SplashScreen, StatusBar } = Plugins;
        StatusBar.setStyle({ style: StatusBarStyle.Light });
        SplashScreen.hide();
      }
    });
  }

  ngAfterViewInit() {
    if (this.platform.is('mobile')) {
      this.deeplinks.routeWithNavController(this.navController, { 'login-callback': SettingsPage }).subscribe(
        (match) => {
          console.log('Successfully matched route', match);
  
          // Create our internal Router path by hand
          const internalPath = '/settings';
  
          // Run the navigation in the Angular zone
          this.zone.run(() => {
            this.router.navigateByUrl(internalPath);
          });
        },
        (nomatch) => {
          // nomatch.$link - the full link data
          console.error("Got a deeplink that didn't match", nomatch);
        }
      );
    }
  }
}

Answer 1

我明白了。我的 Ionic 项目是 Angular 多模块项目和插件 npm 依赖项中的一个模块，已添加到根 package.json.

将所有与 Ionic-native 相关的依赖项移动到 Ionic 项目文件夹中的 package.json 和运行 ionic cap sync 再次解决了我的问题。

现在的问题是How to properly configure a Ionic module in an Angular mono-repo (aka multi-module project)?

与离子/电容器的深层链接

Deeplinks with Ionic / Capacitor

ionic-framework

deep-linking

capacitor