CODEWITHSUNDEEP
ionic-frameworkionic4
timgavin
timgavin

Reputation: 5166

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

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?

Upvotes: 1

Views: 599

Answers (1)

timgavin
timgavin

Reputation: 5166

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>

Upvotes: 1

Related Questions