How to make the node modules working in AngularJS project?

Question

I want to use Smart App Banner in my AngularJS project, smart-app-banner uses npm to manage itself.

The guide is very simple and all in one html file. However, in real project, we need to put each file in the right place.

1. CSS (my project uses scss)

In sample, there is one line in head in html file:

<link rel="stylesheet" href="node_modules/smart-app-banner/smart-app-banner.css" type="text/css" media="screen">

So in my project, I import this css file in app.scss:

@import "node_modules/smart-app-banner/smart-app-banner";

2. JS (my project uses ECMAScript 6)

In sample, there are two part for JS in body in html file:

First Part:

<script src="node_modules/smart-app-banner/smart-app-banner.js"></script>

So in my project, I import this js file in app.js:

import "smart-app-banner";

Second Part:

<script type="text/javascript">
  new SmartBanner({
      daysHidden: 15,   // days to hide banner after close button is clicked (defaults to 15)
      daysReminder: 90, // 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: 'MyPage',
      author: 'MyCompany LLC',
      button: 'VIEW',
      store: {
          ios: 'On the App Store',
          android: 'In Google Play',
          windows: 'In Windows store'
      },
      price: {
          ios: 'FREE',
          android: 'FREE',
          windows: 'FREE'
      }
      // , force: 'ios' // Uncomment for platform emulation
  });
</script>

So in my project, I create a new js file called smart-banner.js in the same directory as app.js file, and put this code in, then import the js file in app.js

import "./smart-banner";

smart-banner.js:

  new SmartBanner({
      daysHidden: 15,   // days to hide banner after close button is clicked (defaults to 15)
      daysReminder: 90, // 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: 'MyPage',
      author: 'MyCompany LLC',
      button: 'VIEW',
      store: {
          ios: 'On the App Store',
          android: 'In Google Play',
          windows: 'In Windows store'
      },
      price: {
          ios: 'FREE',
          android: 'FREE',
          windows: 'FREE'
      }
      // , force: 'ios' // Uncomment for platform emulation
  });

But, it's not working. The banner didn't display correctly. Is any step wrong? How to check these process step by step to make sure every file works correctly?

Answer 1

I have found the answer. The problem happened on the import of JS file.

Because it is ECMAScript 6 with babel, in the documentation, it says:

Import an entire module's contents. This inserts myModule into the current scope, containing all the exported bindings from "my-module.js".

import * as myModule from "my-module";

---

Import a single member of a module. This inserts myMember into the current scope.

import {myMember} from "my-module";

---

Import an entire module for side effects only, without importing any bindings.

import "my-module";

So it didn't work if only import the js file. Instead, it need import the class

import SmartBanner from smart-app-banner;

What's more, you cannot put the import in app.js, you need put it in the js file you uses the class.