如何在Ionic Pro初始化时使用config.xml中的应用版本

我来帮你搞定这个问题！不想在app.module.ts里硬编码应用版本，而是读取config.xml里的信息，你可以通过以下两种方式实现，取决于你用的是Cordova还是Capacitor：

方式一：使用Cordova插件（cordova-plugin-app-version） #

这是传统Ionic Cordova项目的常用方案：

1. 安装插件及依赖
   首先在项目根目录运行以下命令安装插件：

   ionic cordova plugin add cordova-plugin-app-version
   npm install @ionic-native/app-version
   

2. 修改app.module.ts
   导入所需模块，创建异步初始化函数，借助APP_INITIALIZER在应用启动前获取版本号并初始化Ionic Pro：

   import { NgModule, APP_INITIALIZER } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { IonicModule } from '@ionic/angular';
   import { AppComponent } from './app.component';
   import { AppVersion } from '@ionic-native/app-version/ngx';
   import { Platform } from '@ionic/angular';
   import * as Pro from '@ionic/pro';
   
   // 定义初始化函数，异步获取版本号并初始化Pro
   export function initializeIonicPro(appVersion: AppVersion, platform: Platform) {
     return () => platform.ready().then(() => {
       return appVersion.getVersionNumber().then(version => {
         Pro.init('<你的APP_ID>', {
           appVersion: version
         });
       });
     });
   }
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, IonicModule.forRoot()],
     providers: [
       AppVersion,
       {
         provide: APP_INITIALIZER,
         useFactory: initializeIonicPro,
         deps: [AppVersion, Platform],
         multi: true
       }
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

方式二：使用Capacitor App API（适合Capacitor项目） #

如果你的项目用的是Capacitor，不需要额外安装插件，直接用官方的App API即可：

1. 确保安装@capacitor/app
   如果还没安装，运行：

   npm install @capacitor/app
   npx cap sync
   

2. 修改app.module.ts
   同样借助APP_INITIALIZER实现异步初始化：

   import { NgModule, APP_INITIALIZER } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { IonicModule } from '@ionic/angular';
   import { AppComponent } from './app.component';
   import { Platform } from '@ionic/angular';
   import * as Pro from '@ionic/pro';
   import { App } from '@capacitor/app';
   
   // 定义初始化函数
   export function initializeIonicPro(platform: Platform) {
     return async () => {
       await platform.ready();
       const appInfo = await App.getInfo();
       Pro.init('<你的APP_ID>', {
         appVersion: appInfo.version
       });
     };
   }
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, IonicModule.forRoot()],
     providers: [
       {
         provide: APP_INITIALIZER,
         useFactory: initializeIonicPro,
         deps: [Platform],
         multi: true
       }
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

关键说明 #

• 必须在platform.ready()之后调用插件/API，因为Cordova/Capacitor的原生API只有在平台就绪后才能访问，否则会出现未定义错误。
• APP_INITIALIZER会让应用等待异步操作完成后再继续启动，确保Ionic Pro初始化时已经拿到了正确的版本号。

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