Errors after installing the ADMOB FREE plugin


#1

I have followed the steps described here(https://ionicframework.com/docs/native/admob-free/) but I have a big problem with this plugin so I cannot serve nor build my ionic cordova app anymore

here is my error:

Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser -
Ctrl+C to cancel
[17:00:34]  watch started ...
[17:00:34]  build dev started ...
[17:00:34]  clean started ...
[17:00:34]  clean finished in 4 ms
[17:00:34]  copy started ...
[17:00:34]  deeplinks started ...
[17:00:34]  deeplinks finished in 30 ms
[17:00:34]  transpile started ...
[17:00:38]  typescript: D:/MY PROJECTS/APP-test/drepturile/src/pages/home/home.ts, line: 25
            Unexpected token. A constructor, method, accessor, or property was expected.

      L25:    this.admobFree.banner.config(bannerConfig);

[17:00:38]  typescript: D:/MY PROJECTS/APP-test/drepturile/src/pages/home/home.ts, line: 35
            Declaration or statement expected.


[17:00:38]  typescript: D:/MY PROJECTS/APP-test/drepturile/src/pages/home/home.ts, line: 25
            Cannot find name 'bannerConfig'.

      L25:    this.admobFree.banner.config(bannerConfig);

[17:00:38]  dev server running: http://localhost:8100/

[OK] Development server running!
     Local: http://localhost:8100
     External: http://192.168.0.116:8100
     DevApp: drepturile@8100 on DESKTOP-60E39MT

[17:00:38]  copy finished in 4.51 s
[17:00:38]  watch ready in 4.67 s
[17:02:22]  build started ...
[17:02:22]  deeplinks update started ...
[17:02:22]  deeplinks update finished in 10 ms
[17:02:22]  transpile update started ...
[17:02:22]  transpile update finished in 36 ms
[17:02:22]  webpack started ...
[17:02:30]  webpack finished in 7.68 s
[17:02:30]  sass started ...
[17:02:32]  sass finished in 2.16 s
[17:02:32]  build finished in 9.91 s

#2

What does your code look like?

In particular, do you have
this.admobFree.banner.config(bannerConfig);

In a function/method?


#3

yes, I have the following code in my home.ts file:

import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';


constructor(private admobFree: AdMobFree) { }


...


const bannerConfig: AdMobFreeBannerConfig = {
 // add your config here
 // for the sake of this example we will just use the test config
 isTesting: true,
 autoShow: true
};
this.admobFree.banner.config(bannerConfig);

this.admobFree.banner.prepare()
  .then(() => {
    // banner Ad is ready
    // if we set autoShow to false, then we will need to call the show method here
  })
  .catch(e => console.log(e));

#4

That code is for better or worse not able to be directly copy pasted.

You’ll need to place the latter half:

this.admobFree.banner.config(bannerConfig);

this.admobFree.banner.prepare()
  .then(() => {
    // banner Ad is ready
    // if we set autoShow to false, then we will need to call the show method here
  })
  .catch(e => console.log(e));

Inside a function, such as your constructor or whenever you want to prepare an ad.


#5

So, SigmundFroyd after your suggestion my code looks like this:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private admobFree: AdMobFree) {

    this.admobFree.banner.config(bannerConfig);

    this.admobFree.banner.prepare()
      .then(() => {
        // banner Ad is ready
        // if we set autoShow to false, then we will need to call the show method here
      })
      .catch(e => console.log(e));

  }

  const bannerConfig: AdMobFreeBannerConfig = {
   // add your config here
   // for the sake of this example we will just use the test config
   // id: '',
   isTesting: true,
   autoShow: true
 };


}

but still I get another errors now:

ionic serve
Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser -
Ctrl+C to cancel
[19:08:41]  watch started ...
[19:08:41]  build dev started ...
[19:08:41]  clean started ...
[19:08:41]  clean finished in 13 ms
[19:08:41]  copy started ...
[19:08:41]  deeplinks started ...
[19:08:41]  deeplinks finished in 30 ms
[19:08:41]  transpile started ...
[19:08:46]  typescript: D:/MY PROJECTS/APP-test/drepturile/src/pages/home/home.ts, line: 14
            Cannot find name 'bannerConfig'. Did you mean the instance member 'this.bannerConfig'?

      L14:      this.admobFree.banner.config(bannerConfig);

[19:08:46]  typescript: D:/MY PROJECTS/APP-test/drepturile/src/pages/home/home.ts, line: 25
            A class member cannot have the 'const' keyword.

      L25:    const bannerConfig: AdMobFreeBannerConfig = {                                                                             
      L26:     // add your config here

#6

Hey there,
I recently added the AdMobFree plugin to my project too, and I recommend you check out this really useful tutorial. It works without any issues on my Ionic v3 project.



Hope that helped!


#7

So you can either move bannerConfig into your constructor, or replace references to it to this.bannerConfig as the error suggests.


#8

Thanks to SigmundFroyd, the app works like this: (home.ts)

or replace references to it to this.bannerConfig as the error suggests.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AdMobFree, AdMobFreeBannerConfig} from '@ionic-native/admob-free';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private admobFree: AdMobFree) {

  }

  const bannerConfig: AdMobFreeBannerConfig = {
    // add your config here
    // for the sake of this example we will just use the test config
    id: '',
    isTesting: true,
    autoShow: true
  };


  adShow(){
    this.admobFree.banner.config(this.bannerConfig);

    this.admobFree.banner.prepare()
      .then(() => {
        // banner Ad is ready
        // if we set autoShow to false, then we will need to call the show method here
      })
      .catch(e => console.log(e));
  }

}

Unfortunately I have no clue about how to make the ads appear on screen on starting of the app (page). ngOnInit does not do the trick


#9

move bannerConfig into your constructor

SigmundFroyd, I have no idea how to do that. Would you be king enough to help me out ? :slight_smile:


#10

even though in the simulator(ionic serve) the add works, if I hit ionic cordova build android I get this error now:

[20:44:58]  typescript: D:/MY PROJECTS/APP-test/drepturile/src/pages/home/home.ts, line: 16
            A class member cannot have the 'const' keyword.


      L16:    const bannerConfig: AdMobFreeBannerConfig = {

      L17:      // add your config here

Error: Failed to transpile program
    at new BuildError (D:\MY PROJECTS\APP-test\drepturile\node_modules\@ionic\app-scripts\dist\util\errors.js:16:28)
    at D:\MY PROJECTS\APP-test\drepturile\node_modules\@ionic\app-scripts\dist\transpile.js:159:20
    at new Promise (<anonymous>)
    at transpileWorker (D:\MY PROJECTS\APP-test\drepturile\node_modules\@ionic\app-scripts\dist\transpile.js:107:12)
    at Object.transpile (D:\MY PROJECTS\APP-test\drepturile\node_modules\@ionic\app-scripts\dist\transpile.js:64:12)
    at D:\MY PROJECTS\APP-test\drepturile\node_modules\@ionic\app-scripts\dist\build.js:109:82
    at <anonymous>

#11

thanks!

this video that I’ve found is also good :slight_smile:


#12

Oh yeah, like the error says you can’t have a class property/variable that has the const keyword.

So you can safely remove the const from const bannerConfig, or replace it with readonly. Your choice.


#13

what exactly means “replace with readonly” ? :slight_smile:


#14

Just straight up text replacement.

So this:
const bannerConfig: AdMobFreeBannerConfig = {
becomes
readonly bannerConfig: AdMobFreeBannerConfig = {


#15

oww, I see. Pretty cool stuff! Thanks a lot! :slight_smile:


#16

final working code (serve + build) looks like this:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig, AdMobFreeRewardVideoConfig } from '@ionic-native/admob-free';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private admobFree: AdMobFree) {}

  // ionViewDidLoad should start the banner ad as soon as the app is ready
  ionViewDidLoad() {
      const bannerConfig: AdMobFreeBannerConfig = {
        id: '',
        isTesting: false,
        autoShow: true
      };

      this.admobFree.banner.config(bannerConfig);

      this.admobFree.banner.prepare()
        .then(() => {
          // banner Ad is ready
          // if we set autoShow to false, then we will need to call the show method here
        })
        .catch(e => console.log(e));
  }


  showBanner() {
      const bannerConfig: AdMobFreeBannerConfig = {
        id: '',
        isTesting: false,
        autoShow: true
      };

      this.admobFree.banner.config(bannerConfig);

      this.admobFree.banner.prepare()
        .then(() => {
          // banner Ad is ready
          // if we set autoShow to false, then we will need to call the show method here
        })
        .catch(e => console.log(e));
  }


  showInterstitial() {
      const interstitialConfig: AdMobFreeInterstitialConfig = {
        id: '',
        isTesting: false,
        autoShow: true
      };

      this.admobFree.interstitial.config(interstitialConfig);

      this.admobFree.interstitial.prepare()
        .then(() => {
          // banner Ad is ready
          // if we set autoShow to false, then we will need to call the show method here
        })
        .catch(e => console.log(e));
  }


  showRewarded() {
      const rewardVideoConfig: AdMobFreeRewardVideoConfig = {
        id: '',
        isTesting: false,
        autoShow: true
      };

      this.admobFree.rewardVideo.config(rewardVideoConfig);

      this.admobFree.rewardVideo.prepare()
        .then(() => {
          // banner Ad is ready
          // if we set autoShow to false, then we will need to call the show method here
        })
        .catch(e => console.log(e));
  }


}


Building apk with ionic cordova build android but geeting error