安裝新角模塊

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文件（如果存在的話）的路徑