Errors after installing the ADMOB FREE plugin

aldoso · December 5, 2017, 3:11pm

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

SigmundFroyd · December 5, 2017, 3:59pm

What does your code look like?

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

In a function/method?

aldoso · December 5, 2017, 4:03pm

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));

SigmundFroyd · December 5, 2017, 4:09pm

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.

aldoso · December 5, 2017, 5:10pm

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

Adrien-Z · December 5, 2017, 5:20pm

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!

SigmundFroyd · December 5, 2017, 5:21pm

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

aldoso · December 5, 2017, 5:34pm

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

aldoso · December 5, 2017, 5:55pm

move bannerConfig into your constructor

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

aldoso · December 5, 2017, 6:50pm

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>

aldoso · December 5, 2017, 7:01pm

thanks!

this video that I’ve found is also good

SigmundFroyd · December 5, 2017, 7:09pm

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.

aldoso · December 5, 2017, 7:45pm

what exactly means “replace with readonly” ?

SigmundFroyd · December 5, 2017, 7:49pm

Just straight up text replacement.

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

aldoso · December 5, 2017, 8:03pm

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

aldoso · December 5, 2017, 8:54pm

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));
  }


}