ionic app uses old capacitor plugin style (fails)

[wstidolph]

(xplat 12.4.0)

The generated Ionic app Capacitor starts but doesn't work because the imports and status bar styling in app.component.ts need to be brought up to the new Capacitor 3 method:

// import { Plugins, StatusBarStyle } from '@capacitor/core';
// const { StatusBar } = Plugins;
import { StatusBar, Style } from '@capacitor/status-bar';

and the StatusBar.setStyle call in initializeApp should become:

          // style: StatusBarStyle.Dark,
          style: Style.Dark,

This required I install of @capacitor/status-bar - when fixing that you might want to just add in some other packages: per https://capacitorjs.com/docs/updating/3-0:

For best user experience with Ionic Framework, you should make sure these plugins are installed even if you don’t import them in your app: npm install @capacitor/app @capacitor/haptics @capacitor/keyboard @capacitor/status-bar

[NathanWalker]

@wstidolph can you confirm that your project is using 12.4.3 of xplat latest?

Ionic latest was added in 12.4.1 specifically: https://github.com/nstudio/xplat/releases/tag/12.4.1

If you update to 12.4.3, or run nx migrate @nstudio/xplat and then generate Ionic app it should be ready to go.

[wstidolph]

Yeah, I was on 12.4.0.

Just to verify: with 12.4.3 and generating a default ionic app (which runs!) I see that the recommended @capacitor packages are installed, but the generated ionic app doesn't use Capacitor at all, does it? So it's up to me to use it if I choose?

[NathanWalker]

@wstidolph it should by default use Capacitor and should have @capacitor/... deps in it. When you can you might drop the Ionic app's package.json here that you generated in your workspace and I can help confirm if it's correct.

[wstidolph]

(EDIT: replace email reply with same content, just so Markdown supported)

The package.json had the sensible Capacitor dependencies after I generated the ionc-sample app, no problem there; it was the generated starter ionic code in app.component.ts which didn't use Capacitor at all as far as I could tell. Here's what was generated:

import { Component } from ***@***.***/core';

@component({
  selector: 'xpitest-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor() {}
}

The previous generated code had the StatusBar used, so I re-added that this way in app.component.ts without messing with package.json:

import { Component } from ***@***.***/core';
import { Capacitor } from ***@***.***/core';
import { StatusBar, Style } from ***@***.***/status-bar';
import { Platform } from ***@***.***/angular';

@component({
  selector: 'xpitest-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor(
    private platform: Platform
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then( () =>{
      if (Capacitor.isPluginAvailable('StatusBar')){
        StatusBar.setStyle({style:Style.Dark});
        StatusBar.show();
      } else {
        console.log('skipping StatusBar on ', this.platform);
      }
    });
  }
}

[NathanWalker]

Ah got it now thanks. Yes we can add that back to the initial setup of each app. The general plan is to swap the ionic app generator and use https://nxtend.dev/docs/ionic-angular/getting-started/ under the hood as external schematic to streamline the Ionic handling a bit more.