Angular - 模块不可用答案

【问题标题】：Angular - Module not availableAngular - 模块不可用
【发布时间】：2017-11-29 05:41:09
【问题描述】：

我正在使用 mean.js 样板。我想在我的客户端包含angular-stripe。为此，我安装了 angular-stripe，它在 node_modules 下可用。

现在我想将它添加到我的代码中，如下所示

(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; 
    }
());

它会抛出以下错误

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.

【问题讨论】：

在加载主 app.js 之前是否包含了 angular-stripe 插件？
亲爱的，首先检查您的项目中是否包含插件 angular-stripe 和 .js 文件。

标签： angularjs mean-stack meanjs

【解决方案1】：

问题是 angular-stripe 插件在声明 angular 模块时不包括在内。

当使用 node_modules 中的 js 模块时，请在模块声明中使用全局 require() 方法

angular.module('myApp', [
  require('angular-stripe')
]);

另一种解决方案是以“标准”方式 <script src="... 包含文件。

关于 require 方法的好博文here

【讨论】：

【解决方案2】：

如果您使用 MeanJs 样板，则必须在 client - lib 和 client-css 中的 config/assets/default.js 添加您的依赖项（如果依赖项具有 .css 文件）。

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 强烈建议您使用 bower 来处理您的前端依赖项。欲了解更多信息：MeanJS docs

【讨论】：