javascriptangularangular-clismart-app-banner

angular 5+ implement smart-app-banner vanilla JS


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?


Solution

  • 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.