Ads not displaying correctly

[alokjkumar]

Angular, Ionic v5, Capacitor 2.0.1

When trying to display a banner ad, the advert doesn't display correctly as half the screen is occupied by a splashscreen image as shown in this image:

I have abstracted everything into a separate service called admob.service.ts:

  public initAdMob() {
    if(!this.platform.is('mobileweb') && !this.platform.is('desktop')) {
      AdMob.initialize();
      this.init = true;
    }
  }

  public async showBannerAd(position: any = AdPosition.BOTTOM_CENTER, adSize: any = AdSize.SMART_BANNER): Promise<any> {
    if(this.platform.is('mobileweb') || this.platform.is('desktop') || !this.init) { return; }
    const adId = 'ca-app-pub-3940256099942544/6300978111';
    const options: AdOptions = {
      adId: adId,
      adSize: adSize,
      position: position
    }

    AdMob.addListener('onAddFailedToLoad', async (info: any) => {
      this.removeBannerAd();
    });

    return AdMob.showBanner(options)
  }

Which I call like this in app.component.ts:

  this.platform.ready(() => {
    ...
    this.admobService.initAdMob();
  });

    this.router.events.subscribe((route) => {
      if(route instanceof NavigationEnd) {
        if(this.adPages.includes(route.url.split('?')[0])) {
          this.admobService.showBannerAd();
        } else {
          this.admobService.removeBannerAd();
        }
    }
  });

Any ideas on what the issue might be?

EDIT: Moved admob init to a separate function which is called after platform ready - does not fix

[rdlabo]

Why...? Maybe this is SplashScreen issues🤔 Is it the same for the demo? Please clone this repository and test demo code: https://github.com/rdlabo-team/capacitor-admob/tree/master/demo/angular

[alokjkumar]

It works fine for the demo app, I am using the Capacitor splashscreen plugin rather than cordova, maybe this is the issue?

const { Geolocation, StatusBar, SplashScreen, Network } = Plugins;

    this.platform.ready().then(() => {
      if(!this.platform.is('mobileweb') && !this.platform.is('desktop')) {
        StatusBar.setStyle({
          style: this.platform.is('ios') ? StatusBarStyle.Light : StatusBarStyle.Dark
        });
        StatusBar.setBackgroundColor({
          color: '#EC008C'
        });
        SplashScreen.hide();
        this.admobService.initAdMob();
      }
    });

[alokjkumar]

Switch to cordova splashscreen doesn't fix

[rdlabo]

showBannerAd may run too fast (than splashScreen.hide() )

Sorry. This is not plugin issues. My advice is like looking for a needle in a haystack.

[alokjkumar]

I triggered showBannerAd with a button click and it still doesn't work. I will strip back everything and see if I can find the cause.

[alokjkumar]

More info at https://github.com/ionic-team/capacitor/issues/2887