angular 5+ implement smart-app-banner vanilla JS

Question

I am trying to use smart-app-banner in my app, but since there are no typings on the web for it, I don't know how to use it within angular.

So far I've got this in my app.component.ts :

import * as smartBanner from "smart-app-banner";
let smartBannerInstance = smartBanner();

constructor() {
    new smartBannerInstance({
        daysHidden: 10, // days to hide banner after close button is clicked (defaults to 15)
        daysReminder: 20, // days to hide banner after "VIEW" button is clicked (defaults to 90)
        // appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
        title: "Title",
        author: "Authot",
        button: "VIEW",
        store: {
            ios: "On the App Store",
            android: "In Google Play"
        },
        price: {
            ios: "FREE",
            android: "FREE"
        }
        // force: 'android' // Uncomment for platform emulation
    });
}

But I get the usual

Uncaught TypeError: Cannot set property 'options' of undefined at SmartBanner

How can I make this work?

depending how that module is bundled, you might need to `import smartBanner from "smart-app-banner";` instead of `import * ..` — Ovidiu Dolha, Jul 31 '18 at 08:29
it is not a module, it is a plain vanilla js file, doing the thing you have said, i get `Uncaught TypeError: smart_app_banner_1.default is not a function at eval` — Tanasos, Jul 31 '18 at 08:32
oh I see... but i just realized you are doing `let smartBannerInstance = smartBanner();` then `new smartBannerInstance({` .. shouldn't it just be `new smartBanner({ ... })` ? — Ovidiu Dolha, Jul 31 '18 at 08:37
Same - `Uncaught TypeError: smart_app_banner_1.default is not a function at eval` — Tanasos, Jul 31 '18 at 08:40

score 0 · Accepted Answer · answered Jul 31 '18 at 10:59

So, the whole deal with implementing a simple JS library into an Angular application goes like this (in this specific case that is, but it will work for most libraries):

First, we import the library by using the all selector as follows:

import * as SmartBanner from "../../node_modules/smart-app-banner/dist/smart-app-banner.js";

Then, we declare it inside our AppComponent class and then we initialize it within the constructor.

SmartBanner: any;

constructor() {
    new SmartBanner({
        daysHidden: 10, // days to hide banner after close button is clicked (defaults to 15)
        daysReminder: 20, // days to hide banner after "VIEW" button is clicked (defaults to 90)
        // appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
        title: "Title",
        author: "Author",
        button: "VIEW",
        store: {
            ios: "On the App Store",
            android: "In Google Play"
        },
        price: {
            ios: "FREE",
            android: "FREE"
        }
        // force: 'android' // Uncomment for platform emulation
    });
}

And it works perfectly.

If this is somewhat of a performance issue, please anyone that has further knowledge, let me know.

I implemented like this and getting error TypeError: Cannot read property '1' of null — Ante Ereš, Mar 26 '19 at 20:00
Have you installed the plugin as follows: `npm install --save smart-app-banner` ? — Tanasos, Mar 27 '19 at 07:22
of course. It working well with windows, there is an error on android — Ante Ereš, Mar 27 '19 at 07:30

angular 5+ implement smart-app-banner vanilla JS

1 Answers1