安装新角模块

Question

时当我尝试包括braintree-angular到我一饮而尽棱角项目NOMOD错误，我得到以下错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module notecards due to: 
Error: [$injector:modulerr] Failed to instantiate module braintree-angular due to: 
Error: [$injector:nomod] Module 'braintree-angular' 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. 

我经常碰上一饮而尽棱角项目加载新安装的模块问题，我相信它来源于对吞噬作用的普遍缺乏理解。这个项目的一部分是由同事设置的。如果有人能解释为什么我继续看到这样的问题，那将非常感谢！

我已经检查了以下内容：

• 该模块已正确安装在我的/node_modules文件夹中。
• 模块在我的package.json中正确显示。
• 整个文件夹是可读的（我以前曾与文件权限导致此问题，这是不是这里的情况。）
• 布伦特里棱角文件不通过一饮而尽加载。

吞/ server.js

'use strict'; 

var path = require('path'); 
var gulp = require('gulp'); 
var conf = require('./conf'); 
//var babel = require('gulp-babel'); 

var browserSync = require('browser-sync'); 
var browserSyncSpa = require('browser-sync-spa'); 

var util = require('util'); 

var proxyMiddleware = require('http-proxy-middleware'); 

function browserSyncInit(baseDir, browser) { 
    browser = browser === undefined ? 'default' : browser; 

    var routes = null; 
    if (baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) { 
     routes = { 
      '/bower_components': 'bower_components' 
     }; 
    } 

    var server = { 
     baseDir: baseDir, 
     routes : routes 
    }; 

    /* 
    * You can add a proxy to your backend by uncommenting the line below. 
    * You just have to configure a context which will we redirected and the target url. 
    * Example: $http.get('/users') requests will be automatically proxified. 
    * 
    * For more details and option, https://github.com/chimurai/http-proxy-middleware/blob/v0.9.0/README.md 
    */ 
    // server.middleware = proxyMiddleware('/users', {target: 'http://jsonplaceholder.typicode.com', changeOrigin: true}); 

    browserSync.instance = browserSync.init({ 
     startPath: '/', 
     server : server, 
     browser: browser, 
     host: '192.168.0.20', 
     https: false, 
     port : parseInt(process.env.GULP_PORT) || 8684 
    }); 
} 

browserSync.use(browserSyncSpa({ 
    selector: '[ng-app]'// Only needed for angular apps 
})); 

gulp.task('serve', ['watch'], function() { 
    browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]); 
}); 

gulp.task('serve:dist', ['build'], function() { 
    browserSyncInit(conf.paths.dist); 
}); 

gulp.task('serve:e2e', ['inject'], function() { 
    browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []); 
}); 

gulp.task('serve:e2e-dist', ['build'], function() { 
    browserSyncInit(conf.paths.dist, []); 
}); 

var gulp = require('gulp'); 
var webserver = require('gulp-webserver'); 

gulp.task('webserver', function() { 
    gulp.src('src') 
    .pipe(webserver({ 
     host: '0.0.0.0', 
     livereload: true, 
     directoryListing: true, 
     open: true 
    })); 
}); 

gulpfile.js

/** 
* Welcome to your gulpfile! 
* The gulp tasks are splitted in several files in the gulp directory 
* because putting all here was really too long 
*/ 

'use strict'; 

var gulp = require('gulp'); 
var wrench = require('wrench'); 

/** 
* This will load all js or coffee files in the gulp directory 
* in order to load all gulp tasks 
*/ 
wrench.readdirSyncRecursive('./gulp').filter(function (file) { 
    return (/\.(js|coffee)$/i).test(file); 
}).map(function (file) { 
    require('./gulp/' + file); 
}); 


/** 
* Default task clean temporaries directories and launch the 
* main optimization build task 
*/ 
gulp.task('default', ['clean'], function() { 
    gulp.start('build'); 
}); 

的package.json

{ 
    "name": "healthbydna", 
    "version": "0.0.0", 
    "dependencies": { 
    "angular-chart.js": "^1.0.3", 
    "babel": "^6.5.2", 
    "braintree-angular": "^1.5.0", 
    "gulp-babel": "^6.1.2", 
    "gulp-extend": "^0.2.0", 
    "gulp-if": "^2.0.0", 
    "gulp-ng-constant": "^1.1.0", 
    "jotted": "^1.5.1", 
    "lazypipe": "^1.0.1" 
    }, 
    "scripts": { 
    "test": "gulp test" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.21.0", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-es2016": "^6.16.0", 
    "browser-sync": "~2.9.11", 
    "browser-sync-spa": "~1.0.3", 
    "chalk": "~1.1.1", 
    "del": "~2.0.2", 
    "eslint-plugin-angular": "~0.12.0", 
    "estraverse": "~4.1.0", 
    "gulp": "^3.9.1", 
    "gulp-angular-filesort": "~1.1.1", 
    "gulp-angular-templatecache": "~1.8.0", 
    "gulp-autoprefixer": "~3.0.2", 
    "gulp-eslint": "~1.0.0", 
    "gulp-filter": "~3.0.1", 
    "gulp-flatten": "~0.2.0", 
    "gulp-inject": "~3.0.0", 
    "gulp-load-plugins": "~0.10.0", 
    "gulp-minify-css": "~1.2.1", 
    "gulp-minify-html": "~1.0.4", 
    "gulp-ng-annotate": "~1.1.0", 
    "gulp-protractor": "~1.0.0", 
    "gulp-rename": "~1.2.2", 
    "gulp-replace": "~0.5.4", 
    "gulp-rev": "~6.0.1", 
    "gulp-rev-replace": "~0.4.2", 
    "gulp-sass": "~2.0.4", 
    "gulp-size": "~2.0.0", 
    "gulp-sourcemaps": "~1.6.0", 
    "gulp-uglify": "~1.4.1", 
    "gulp-useref": "~1.3.0", 
    "gulp-util": "~3.0.6", 
    "gulp-webserver": "^0.9.1", 
    "http-proxy-middleware": "~0.9.0", 
    "karma": "~0.13.10", 
    "karma-angular-filesort": "~1.0.0", 
    "karma-coverage": "~0.5.2", 
    "karma-jasmine": "~0.3.6", 
    "karma-ng-html2js-preprocessor": "~0.2.0", 
    "karma-phantomjs-launcher": "~0.2.1", 
    "lodash": "~3.10.1", 
    "main-bower-files": "~2.9.0", 
    "phantomjs": "~1.9.18", 
    "uglify-save-license": "~0.4.1", 
    "wiredep": "~2.2.2", 
    "wrench": "~1.5.8" 
    }, 
    "engines": { 
    "node": ">=0.10.0" 
    } 
} 

Answer 1

好的，解决这个问题的方法是从node_modules中删除braintree-angular并通过bower安装它。我还需要将版本锁定为v1.3.0。我不确定为什么这个固定它，所以一个解释将是伟大的:)

Answer 2

Gulp与Angular模块无关。从您发布的任务中，它仅用于本地主机开发，并不构建任何依赖注入。

您的问题可能来自不需要依赖模块。你的app.module应该看起来像这样。

angular.module('app', [ 
    'angular-svg-round-progress' 
]); 

而且还要确保在应用程序之前加载模块，否则实例化将失败。

Answer 3

Gulp只是一个（非常强大的）任务跑步者，简单朴素。它可以做你自己可以做的事情，但你没有时间;）

节点模块和Angular模块不是一回事。节点模块具有广泛的范围，用于在Node.js平台中运行通用代码。也就是说，在典型的网页浏览器设置之外运行的Javascript。例如桌面应用程序，贷款计算器，网络服务器，聊天程序等。

但是，许多节点模块专门用于Angular并具有Bower计数器部件。鲍尔包，的确，在您的网页直接包括：

<script src="./bower_components/path/to/script.js" type="text/javascript"></script> 

为什么会出现两个节点模块和鲍尔包网络模块，你可能会问？这是因为像Browserify和Webpack这样的打包程序可以让您在网页中实际使用Node模块。看起来你的项目没有安装捆绑软件。

您想要为您的模块获取已编译的js（理想情况下通过修改您的gulp文件以从节点模块的文件夹编译和/或连接正确的JS文件）或使用Bower下载已编译的JS， gulp文件将其包含在并置过程中。

有多个文件组成你项目的Gulp进程。在其中一个文件中查找“构建”任务。它应该包含有关如何构建供应商JS文件的详细信息。你想修改它以便它包含braintree-angular的JS文件（如果存在的话）的路径