Search code examples
angularjsmean-stackmeanjs

Angular - Module not available


I am using mean.js boilerplate. I would like to include angular-stripe in my client side. For that I have installed angular-stripe and it is available under node_modules.

Now I would like to add it in my code as follows

(function () {
'use strict';

angular
  .module('myApp', [
    'angular-stripe'
  ])
  .config(function (stripeProvider) {
    stripeProvider.setPublishableKey('my_key')
  })

      PaymentController.$inject = ['$scope', '$state', 'Authentication', 'Socket', 'stripe'];

      function PaymentController($scope, $state, Authentication, Socket, stripe) {
        var vm = this; 
    }
());

It throws the folowing error

Module 'angular-stripe' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Solution

  • If you're using MeanJs boilerplate, you have to add your dependencies at config/assets/default.js in client - lib and client-css if the dependecy has a .css file.

    module.exports = {
      client: {
        lib: {
          css: [
            // bower:css
            'public/lib/bootstrap/dist/css/bootstrap.css',
            'public/lib/bootstrap/dist/css/bootstrap-theme.css',
            'public/lib/angular-ui-notification/dist/angular-ui-notification.css'
            // endbower
          ],
          js: [
            // bower:js
            'node_modules/angular-stripe/src/index.js',
            'public/lib/angular/angular.js',
            'public/lib/angular-animate/angular-animate.js',
            'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
            'public/lib/ng-file-upload/ng-file-upload.js',
            'public/lib/angular-messages/angular-messages.js',
            'public/lib/angular-mocks/angular-mocks.js',
            'public/lib/angular-resource/angular-resource.js',
            'public/lib/angular-ui-notification/dist/angular-ui-notification.js',
            'public/lib/angular-ui-router/release/angular-ui-router.js',
            'public/lib/owasp-password-strength-test/owasp-password-strength-test.js',
            // endbower
          ], // rest of the code..
    

    MeanJs highly recommend to use bower for your frontend dependencies. For more info: MeanJS docs