Loading NPM module when using Bower Grunt Angularjs Build

Question

I'm currently trying to integrate an npm module into an application that is built on Angularjs 1.4, Grunt, and Bower.

Require and Import do not work in the angualrjs framework which is the only way I can think of accessing the node_modules folder.

Does anyone have any idea how to use both npm and bower modules in the same application?

Here is a very trimmed down version of my app.js folder:

    (function(angular) {
      'use strict';
      angular
        .module('AppApp', [dependencies])

      .constant('appconfig',{})
      .config(function(...){

      $statprovider.state{...}
      .run(function($state){
      $state.go('login);
 })
})(angular);

I currently get all my dependencies through bower and access via index.html file. This does not seem to work if I write a script tag linking to the node_modules folder there.

Answer 1

USING MODULE INJECTION IN ANGULARJS

Accessing AngularJS modules from node_modules and bower_components is straight forward:

Let's take an example of angular-bootstrap from node_modules (Similar can be done from bower_components):

In HTML file, specify the reference of js file.

<script type="text/javascript" src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.js"></script>

In your angular module, register the dependency as (You can check the module name on npm website or github while downloading or you can check it in the js files in node_modules/bower_components after downloading):

angular.module('AppApp',
    [
        '*ui.bootstrap*',
    ]);

However, you can also make Require and Import work in the AngularJS framework. This can be done using browserify or webpack that bundles your all the javascript files containing require/import into one to resolve the dependencies so that browser can understand require/import syntax, which is otherwise not understood by browsers.

USING BROWSERIFY

For using browserify when using grunt (app.js is the file containing require, you can specify other files in the array),

browserify: {
        options: {
            browserifyOptions: {
                debug: true,
                insertGlobalVars: []
            },
            transform: ['brfs' ]
        },
        app: {
            files: {
                ['app.js']
            }
        }
}

node_modules dependencies required to use browserify are: brfs, grunt-browserify