Using Google Admob In Your NativeScript Angular 2 Mobile App

I recently received a request from one of my followers for a tutorial on using Google Admob in a NativeScript Angular 2 application.  Not too long ago I had demonstrated Google Admob in a vanilla NativeScript project, but I hadn’t yet given it a shot with Angular 2.

In case you’re unfamiliar with Admob, it is an excellent way to monetize your mobile applications with advertisements.  You’ll earn revenue not only from people clicking your in-app advertisements, but also from the advertisements appearing on the screen.

We’re going to see how to use Admob in a NativeScript Android and iOS application that was built with Angular 2.

To get the most out of this tutorial, we’re going to start with a clean slate.  Open your Command Prompt (Windows) or Terminal (Mac and Linux) and execute the following commands:

The --ng flag in the above indicates that we are going to be building an Angular 2 project with TypeScript.  You’ll notice that I’m adding both the Android and iOS build platforms.  If you’re not using a Mac, you won’t be able to build for iOS.

This project, like the vanilla project we had made previously, requires the nativescript-admob plugin that was created by Eddy Verbruggen.  This plugin can be installed by executing the following:

Because we are using TypeScript in our project, we need to configure the type definitions that are included with the Admob plugin.  While it isn’t a requirement, it definitely helps us out.  Open the project’s references.d.ts file and add the following:

Now we’ll have features such as IDE autocomplete and a few others in our project.

NativeScript Angular 2 Admob 1 NativeScript Angular 2 Admob 2 NativeScript Angular 2 Admob 3

The goal here is to create what is seen above.  At this point in time, if you haven’t already, you should sign into the Google Admob dashboard and create two applications.  The reason I say two is because you should create an iOS version and an Android version of the same application in the portal.  This allows you to track statistics between the two platforms.  Make sure you’ve created both a banner unit and an interstitial unit for each of the two applications.

Developing the TypeScript Logic for Our Admob Project

Open your project’s app/app.component.ts file and include the following TypeScript code:

Since there is a lot of code in the above block, let’s break it down piece by piece.

In the above we are importing the Angular 2 dependency as well as the Admob dependency that we had installed via our Command Prompt or Terminal.

Inside the AppComponent class we have the following private variables:

These four variables should be set to the advertisement unit ids that you created in your Admob dashboard.  I’ve just included placeholder values to give you an idea of what they look like.  My values won’t work, but yours will.

Now we have three different methods for working with the advertisements, starting with the createBanner method:

Using the imported NativeScript Admob plugin we can create a SMART_BANNER at the bottom of the screen using the set unit ids and any set test ids.  You’ll also notice that the banner is set to be running in testing mode.  This will prevent us from getting banned from Admob while we test with false hits.

Now in regards to the banner types.  There are quite a few and they include the following:


I encourage you to do the research on what each banner type accomplishes.

There may be a scenario where we want to hide our banner.  Maybe you have an in-app-purchase that removes advertisements and you want to hide it after they buy.  That is where our hideBanner method comes into play:

The above doesn’t do anything beyond hiding our only banner advertisement.

Finally we have our interstitial advertisement.  If used correctly, this type of advertisement could earn you the most revenue in your application.  In the createInterstitial method we have the following:

Again we’re using testing mode with the ids that we defined at the top of our TypeScript file.  The difference here is that we’re using Admob.createInterstitial instead of trying to create a banner advertisement.  The interstitial is like a popup where it takes up the full screen rather than a portion of the screen.

With the TypeScript out of the way, let’s create our simple yet powerful UI.

Creating the UI for Our Admob Project

The UI is going to be short and sweet.  It is going to contain three buttons, that when pressed, will trigger each of the methods that we had created in our TypeScript code.

Open the project’s app/app.component.html file and include the following HTML markup:

As you can see in the above we have an action bar with three buttons.  Each of the three buttons are styled using the included NativeScript theme.  When tapped, the corresponding TypeScript method will be triggered to either show or hide a banner advertisement or show an interstitial advertisement.


You just saw how to use Google Admob in a NativeScript Angular 2 project.  This is an alternative to the vanilla tutorial that was previously written.  Ad units are a great way to earn revenue in your mobile application without actually charging your users some kind of fee.  Just remember to switch off the testing indicator when you go into production, otherwise you won’t make any money.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Ahmed

    Thanks , Great Job

  • robcaa

    If you have this error:
    app/app.component.ts(13,24): error TS2307: Cannot find module ‘nativescript-admob’.
    TypeScript compiler failed with exit code 1

    Just import this way:
    var Admob = require(“nativescript-admob”);

    And if you have this error:
    Could not find
    Just install Google Repository form your sdk manager

  • deifos

    This is great, thank you so much!

  • Nacho

    Hey @nicraboy:disqus nice article, I posted an issue on the repo because for some reason I’m unable to see the Ads when downloaded from TestFlight ( By chance did you hear something that might be related to this ?

    • Numerous factors can cause this. For example, maybe Admob isn’t allowed in your country or maybe you’re not using the correct publisher id.

      You might check the logs before uploading to test flight. If there is a problem with ads, you’ll see it in the logs.

      I am using this plugin in my app, Solar Flare for Cloudflare without issue.

      • Nacho

        Thanks Nic, what is wear to me is that exactly the same code runs correctly on the emulator and even on the same mobile when I run it directly from my machine, the problem seems to appear just with the downloaded version so I guessed if wasn’t some sandbox restriction or similar. I would double check the logs as you suggested. Thanks again!

        • Yea it may be some sandbox problem. It is probably for your benefit as improper testing of ads can result in your account being banned.

          Ads are working fine for me on the app store, so I wouldn’t worry about it.

  • Brandon

    Hi Nic. Can we get an update for this? It seems broken, but it might just be me.

    • What’s the problem? I recently added it to my own personal app and it works fine.

      • Brandon

        I had this issue:

        • It’d be helpful to share your problem here rather than having everyone go on a link adventure.

          • Brandon

            Here’s the issue:

            “I added this plugin to my project and it immediately stopped building for iOS. I was following Nic Raboy’s tutorial for adding nativescript-admob to a Nativescript + Angular project:

            The following build commands failed:
            Ld /Users/Me/Library/Developer/Xcode/DerivedData/MyProject-fsdfsdfsdfsdf/Build/Intermediates/ normal x86_64
            (1 failure)
            Unable to sync files. Error is: Command xcodebuild failed with exit code 65
            I tried removing it with tns plugin remove nativescript-admob and it says:
            “Successfully removed plugin nativescript-admob for ios.”

            …but it still won’t build and I get the same error even after removing the plugin.

            I created a fresh tns create ProjectName –ng (which worked fine initially) and I added admob to it again with “tns plugin add nativescript-admob” and the error returned and would not go away after removing the plugin just like before.

            The plugin still prevents the project from building, but deleting the ios platform and removing the plugin before building again with “tns run ios” allows the project to build again as normal (without admob). I added the plugin again and the build failed like before.”

          • Never seen that one before.

            What version of Xcode are you using? I heard 8.3 has issues for some people. Also, can you confirm you are not trying to Webpack?

            Can you try it on Android as well?

          • Brandon

            Strange… it’s working now and I have no idea what happened. I probably made an error somewhere. Thanks for your reply anyway, and thanks for all your help, Nic.

          • No problem!

            When in doubt, remove the platforms directory. Maybe 1 in 200 builds mine gets messed up somehow. Reach out any time.