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.

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";

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?

What are you using to bundle your modules? Webpack or Browserify? — Joe Clay, Mar 21 '16 at 22:55
@JoeClay None. Is that important? Actually all augular stuff is part of the `elixir-pheonix` project, in a directory called `static` under `web` dir — Stephen, Mar 21 '16 at 23:08
That's probably your issue, then. The `import "module";` syntax isn't supported in any browsers yet; the most common (maybe only?) way to use it is through Webpack/Browserify in combination with babel-loader/babelify. That said, I don't use Elixir myself, so I can't tell you for sure if that's the issue. — Joe Clay, Mar 21 '16 at 23:15
Taking a very brief look at the Elixir docs though, it seems pretty simple to set up Browserify and Babelify: https://laravel.com/docs/5.2/elixir#browserify. I can't really see any other glaring issues with your code, so I imagine that's all that's stopping it from working :) — Joe Clay, Mar 21 '16 at 23:20
@JoeClay the elixir-phoenix is not laravel one, it's http://www.phoenixframework.org. And I use `babel` — Stephen, Mar 22 '16 at 03:39
Ah, I'm not familiar with Phoenix, so I can't really be much help here. It does sounds to me though that your issue is that you're not using a module bundler, you can't use imports/exports in the browser without one (Babel will convert `import a as "./a.js"` to `var a = require("./a.js")`, but it won't actually link everything together). — Joe Clay, Mar 22 '16 at 08:41

score 0 · Accepted Answer · answered Mar 24 '16 at 05:38

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.

How to make the node modules working in AngularJS project?

1 Answers1