NativeScript / firebase

Modular Firebase 🔥 implementation for NativeScript. Supports both iOS & Android platforms for all Firebase services.
https://docs.nativescript.org/plugins/firebase-core.html
Apache License 2.0
56 stars 49 forks source link

Nativescript 8.2.3 : Failed to find module: "@nativescript/firebase-admob" #95

Closed maxximee closed 2 years ago

maxximee commented 2 years ago

Followed the readme guide for firebase-admob but keep getting this error:

ERROR TypeError: Could not load view for: BannerAd.Error: com.tns.NativeScriptException: Failed to find module: "@nativescript/firebase-admob", relative to: app/tns_modules/

Did a npm install @nativescript/firebase-admob, added app-id in android manifest, imported and called Admob.init in app.components.ts ngOnInit() added module in app.module.ts. I then added on my home view as per guide:

                        <BannerAd
                                height="320"
                                width="50"
                                [unitId]="bannerAdUnit"
                                (layoutChanged)="bannerLoaded($event)">
                        </BannerAd>

and in the code added var for the adunit (using the test unit id): public bannerAdUnit = 'ca-app-pub-3940256099942544/6300978111'; and a bannerLoaded method :

 public bannerLoaded(event): void {
        console.log('got banner loaded event');
        const bannerView = event.object;
        bannerView.load();
}

Am I missing something or does the plugin not work with ns 8.2.3 yet? I checked in the modules and I can find the firebase-admob: image

MrSnoozles commented 2 years ago

I'm using it successfully on 8.2.3, so that can be ruled out.

Could you show the code where you're initialising Admob, e.g.

import { Admob } from '@nativescript/firebase-admob'
Admob.init()
maxximee commented 2 years ago

In app.components.ts: First added import:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Application, AndroidApplication, isAndroid } from '@nativescript/core';
import { AppCenter, AppCenterSettings } from 'nativescript-microsoft-appcenter';
import { filter } from 'rxjs/operators';
import { UserDataPersisterService } from './shared/services';
import { Admob } from '@nativescript/firebase-admob';

declare let APPCENTERID;

Then in ngOnInit, just before I initialialize AppCenter:

public ngOnInit(): void {
        Admob.init();
        if (isAndroid) {
            if (typeof APPCENTERID !== 'undefined') {
                console.log('Initializing App Center (Android) with ID ' + APPCENTERID);

                const appCenter: AppCenter = new AppCenter();
                const appCenterSettings: AppCenterSettings = {
                    appSecret: APPCENTERID,
                    analytics: true,
                    crashes: true
                };

                appCenter.start(appCenterSettings);
            } else {
                console.log('Did not initialize App Center');
            }
        }
    }
maxximee commented 2 years ago

@MrSnoozles I noticed this in the gradle file: implementation project(path: ':admob') Is this necessary? What would that be for an external project? Also I don't understand the error message: ERROR TypeError: Could not load view for: BannerAd.Error: com.tns.NativeScriptException: Failed to find module: "@nativescript/firebase-admob", relative to: app/tns_modules/ "Relative to: app/tns_modules/" This tns_module is a very old naming, dating from nativescript 5 or so. It's now called "node_modules". Is there something to change here to make it point to node_modules?

Note: I tested the Interstitial Ad and it works fine, it's just the banner ad that doesn't work. Also here is my html code for the banner ad:

<BannerAd height="320" width="50" [unitId]="bannerAdUnit" (layoutChanged)="bannerLoaded($event)"> </BannerAd>

maxximee commented 2 years ago

I was able to solve the issue. Since am using html / nativescript and not xml I had to register the BannerAd element in the module: registerElement('BannerAd', () => require('@nativescript/firebase-admob').BannerAd);