Why Does AdMob Free Crash My App in the iOS Simulator? - ionic-framework

Question

I'm trying to add adMobFree to a brand New Ionic 4 project.
I've tried doing this over and over, using different methods and following different tutorials and the result is always the same: the app refuses to run in the iOS Simulator. It just stops at the splash screen.
installation steps
ionic cordova platform add ios
ionic cordova platform add android
ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-app-pub-12345678901234567890"
npm install #ionic-native/admob-free
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 { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AdMobFree } from '#ionic-native/admob-free/ngx';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
AdMobFree,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
ads.service.ts
import { Injectable } from '#angular/core';
import { Platform } from '#ionic/angular';
import { AdMobFree, AdMobFreeBannerConfig } from '#ionic-native/admob-free/ngx';
#Injectable({
providedIn: 'root'
})
export class AdsService {
bannerId: 'ca-app-pub-12345678901234567890';
constructor(
public platform: Platform,
private admobFree: AdMobFree
) { }
showBanner() {
this.platform
.ready()
.then(() => {
const bannerConfig: AdMobFreeBannerConfig = {
id: this.bannerId,
isTesting: false,
autoShow: false
};
this.admobFree.banner.config(bannerConfig);
this.admobFree.banner
.prepare()
.then(() => {
this.admobFree.banner.show();
})
.catch(e => console.log(e));
})
.catch(e => console.log(e));
}
}
home.page.ts
import { Component } from '#angular/core';
import { AdsService } from '../services/ads.service';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(
public ads: AdsService
) {
this.ads.showBanner();
}
}
What am I doing wrong?

Answer 1

This SO answer was the solution
https://stackoverflow.com/a/59276508/2101328
For Ionic App with Admob plugin (I've tried just in Ioniv V3) you can
add this in ./config.xml under platform ios to auto populate
app-name-info.plist file at every build time.
<platform name="ios">
<config-file parent="GADApplicationIdentifier" target="*-Info.plist">
<string>ca-app-pub-12345/12345</string>
</config-file>
<config-file parent="GADIsAdManagerApp" target="*-Info.plist">
<true />
</config-file>
... (other lines) ...
</platform>