AdMob Free not working (Failed to load /plugins/cordova-plugin-admob-free/www/admob.js.map)

Hi,

I can’t get AdMob Free running on my iOS app.
I’m always getting the console error:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://MY-IP-ADDRESS/plugins/cordova-plugin-admob-free/www/admob.js.map

(I anonymized my IP address here).

I’m running the application on an iOS simulator via ionic cordova emulate.

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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { WebView } from '@ionic-native/ionic-webview/ngx';
import { AdMobFree } from '@ionic-native/admob-free/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    WebView,
    Network,
    AdMobFree,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

admob.page.ts

import { Component, OnInit } from '@angular/core';
import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free/ngx';

@Component({
  selector: 'app-admob',
  templateUrl: './admob.page.html',
  styleUrls: ['./admob.page.scss'],
})
export class AdmobPage implements OnInit {

  constructor(
    public admob: AdMobFree
  ) { }

  ngOnInit() {
  }

  showBanner() {

    let bannerConfig: AdMobFreeBannerConfig = {
      isTesting: true, // Remove in production
      autoShow: true
      //id: Your Ad Unit ID goes here
    };

    this.admob.banner.config(bannerConfig);

    this.admob.banner.prepare().then(() => {
      // success
    }).catch(e => console.log(e));

  }

  launchInterstitial() {

    let interstitialConfig: AdMobFreeInterstitialConfig = {
      isTesting: true, // Remove in production
      autoShow: true
      //id: Your Ad Unit ID goes here
    };

    this.admob.interstitial.config(interstitialConfig);

    this.admob.interstitial.prepare().then(() => {
      // success
    });

  }

}

admob.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>admob</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="dark">

<ion-button (click)="showBanner()" expand="block" fill="clear" shape="round">
  Click me
</ion-button>

<ion-button (click)="launchInterstitial()" expand="block" fill="clear" shape="round">
  Click me
</ion-button>

</ion-content>

Nothing happens if I execute showBanner() or launchInterstitial().
Also, if I do a console.log in the function this.admob.banner.prepare(), nothing happens, it’s somehow not executed. I also tried adding my ID, but this also didn’t work.

Does anybody know how to fix this?
I’m using the latest Ionic 5 with the latest plugins.

Thank you in advance!

Hi there,

Have you tried to declare the ads config at the beggining?

I published an article in medium for ionic5, perhaps it can help you.