When I try to include braintree-angular into my gulp-angular project, I get the following error:
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.
I routinely run into issues loading newly install modules in gulp-angular projects, and I believe it comes from a general lack of understanding in how gulp works. The gulp portion of this project was setup by a coworker. If someone could explain why I continue to see issues like this, it would be much appreciated!
I have checked the following:
The module is correctly installed in my /node_modules folder.
The module appears correctly in my package.json.
The entire folder is readable (I've previously had issues with file permissions causing this. This is not the case here.)
The braintree-angular files are not being loaded by gulp.
gulp/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"
}
}
Gulp is just a (very powerful) task runner, plain and simple. It does things you could do yourself, but you don't have the time for ;)
Node modules are not the same thing as Angular modules. Node modules have a broad scope and are for running general purpose code in the Node.js platform. That is, Javascript that runs outside of the typical web-browser setting. For example a desktop application, a loan calculator, a web server, a chat program, etc.
However, many Node modules are specifically for use with Angular and have a Bower counter-part. Bower packages are, indeed, for including directly in your webpage:
<script src="./bower_components/path/to/script.js" type="text/javascript"></script>
Why is there both a Node module AND a Bower package for a web module, you might ask? That's because of bundlers like Browserify and Webpack that let you actually use Node modules in your webpage. It does not appear that your project is setup for a bundler.
You want to either get the compiled js for your module (ideally by modifying your gulpfile to compile and/or concatenate the correct JS file from the node module's folder) or use Bower to download the already compiled JS, and modify the gulp file to include it into the concatenation process.
There are multiple files that make up the Gulp process for your project. Look for the 'build' task in one of those files. It should include the details about how vendor JS files are built. You want to modify it so that it is including the path to braintree-angular's JS file (if it exists)
Okay, the fix to this very specific issue was to remove braintree-angular from node_modules and install it via bower. I also need to lock the version to v1.3.0. I am unsure why this fixed it, so an explanation would be great :)
Gulp has nothing to do with Angular modules. From tasks you have published it is only used for localhost development and build not for any dependency injection.
Your problem is probably coming from not requiring dependency for module. You app.module should look something like this.
angular.module('app', [
'angular-svg-round-progress'
]);
And also make sure module is loaded before your app else instantiation will fail.
Related
I'm building a website in Wordpress and I am trying to use gulp, webpack-stream, and babel-loader to convert JSX to JS (I was successful at using gulp to sass my CSS, so I removed that code).
Whenever I run the gulp command in terminal to convert the JSX, I get this incorrect output in the generated Javascript file:
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);n(1);console.log("ugh")},function(e,t){console.log("test running")}]);
I can't figure out if I'm getting this error because I'm missing vital packages or if something else is wrong with my gulp commands.
Here is my package.json's dependencies
{
"devDependencies": {
"#babel/core": "^7.11.4",
"#babel/preset-env": "^7.11.0",
"#babel/register": "^7.10.5",
"#wordpress/browserslist-config": "^2.7.0",
"autoprefixer": "^9.8.6",
"babel-loader": "^8.1.0",
"babelify": "^10.0.0",
"browserify": "^17.0.0",
"browserslist": "^4.14.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-terser": "^1.4.0",
"webpack-stream": "^6.1.0"
},
"browserslist": [
"extends #wordpress/browserslist-config"
]
}
Here is my gulpfile.babel.js file:
// load gulp
import gulp from 'gulp';
// utility
import sourcemaps from 'gulp-sourcemaps';
// css-related
import sass from 'gulp-sass';
import postcss from 'gulp-postcss';
import autoprefixer from 'autoprefixer';
// js-related
import webpack from 'webpack-stream';
// project
const paths = {
scripts: {
src: 'src/scripts/bundle.js',
dest: './build/js/'
}
}
// enable javasript
export const scripts = (done) => {
return gulp.src( paths.scripts.src )
.pipe( webpack({
// module: {
// rules: [
// {
// test: /\.js$/,
// use: {
// loader: 'babel-loader',
// options: {
// presets: ['#babel/preset-env']
// }
// }
// }
// ]
// },
output: {
filename: 'bundle.js'
}
}) )
.pipe( gulp.dest( paths.scripts.dest ) );
done();
}
I commented out the webpack module items because I was eliminating the possible reasons for why it wasn't working. When I commented out webpack, the code "worked" in that it copied the file over to the build folder.
Here is the bundle.js file that contains JSX
console.log('ugh');
import './components/test';
let x = 0;
and here is what test.js contains
console.log("test running");
I also received the following message inside terminal:
(node:13196) [DEP0097] DeprecationWarning: Using a domain property in MakeCallback is deprecated. Use the async_context variant of MakeCallback or the AsyncResource class instead.
[22:53:54] Version: webpack 4.44.2
Built at: 10/20/2020 10:53:54 PM
Asset Size Chunks Chunk Names
bundle.js 1020 bytes 0 [emitted] main
Entrypoint main = bundle.js
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
[22:53:54] Finished 'scripts' after 1.69 s
I'm totally new to using node, npm, and gulp, and have been following tutorials as best I can to try to get this to work, but every tutorial is either old, or I end up with garbage code in the destination file. I'm also the lone developer and designer, and I desperately need some feedback/assistance. I would be forever grateful to whoever can help me get this to work properly, and am happy to provide any additional information in order to figure this out.
I have a gulp project I inherited.
I am supposed to be migrating gulp v3 to v4.
However, I cannot find a gulpfile.js in this project at all.
Yet, every tutorial requires one. I am assuming there is some setup where the last developer knew about which is probably outdated?
Here is my folder structure:
All tasks are grouped in the Tasks folder. I want to say these exported with the root files which actually run those tasks files are my "gulpfiles".
All gulp tasks are ran using: node platform/build.js or node platform/deploy.js
I can make changes to this and everything, I see how he called it and wrote tasks. But I don't know the paradigm he is using to do this so it's difficult to know where to start migrating this to gulp v4.
Gulp libraries we are using:
"gulp": "3.9.1",
"gulp-autoprefixer": "6.0.0",
"gulp-bundle-assets": "2.29.0",
"gulp-concat": "2.6.1",
"gulp-csso": "3.0.1",
"gulp-data": "1.3.1",
"gulp-ejs": "3.3.0",
"gulp-empty": "0.1.2",
"gulp-eslint": "5.0.0",
"gulp-htmlmin": "5.0.1",
"gulp-if": "2.0.2",
"gulp-imagemin": "5.0.3",
"gulp-rename": "1.4.0",
"gulp-replace": "1.0.0",
"gulp-rimraf": "0.2.2",
"gulp-sass": "3.2.1",
"gulp-sass-lint": "1.4.0",
"gulp-sourcemaps": "2.6.5",
"gulp-string-replace": "1.1.2",
"gulp-strip-comments": "2.5.2",
"gulp-webserver": "0.9.1",
How it runs gulptasks:
// STEP 1 - process.env.NODE_ENV to staging
(!process.env.NODE_ENV) && (process.env.NODE_ENV = 'staging');
// STEP 2 - Prevent from running on NON-CI
if (!process.env.CI) {
throw new Error('Build can only be performed in CI Environment');
}
// START PROCESS
const _ = require('lodash'),
gulp = require('gulp'),
Tasks = require('./tasks'),
runSequence = require('run-sequence').use(gulp),
// This of the tasks here is the order in which they will executed
taskMap = {
'clean:dist': Tasks.cleanDist,
'clean:tmp': Tasks.cleanTemp,
'copy:assets': Tasks.assetCopy,
'bundle': Tasks.bundleAssets,
'transpile': Tasks.transpile,
'prefixCss': Tasks.autoprefixCss,
'sitemap': Tasks.sitemap,
'robots': Tasks.robots,
'remove:htmlext': Tasks.removeHtmlExt
};
// Create all tasks
_.forEach(taskMap, (value, key) => {
gulp.task(key, value);
});
// #todo: Shift to using gulp.series when gulp is upgraded to v4
gulp.series(..._.keys(taskMap))();
A gulpfile is really just a chunk of Javascript code - it's named with a default name so when you run gulp it finds it by default.
You actually have gulpfiles - they're each of those individual .js files you're talking about.
I suspect they were split up this way because somebody thought there were too many tasks in each one and wanted to separate them by "topic" somehow.
I inherited a project that used Gulp with no gulpfile a while back. It turned out it was actually inside of a shared gulpfile which was hosted on npm (like https://github.com/jonathantneal/gulp-config-dev). Long shot, but perhaps it's listed as a dependency in package.json.
I am trying to find the best way to package only the node_modules dependencies that my project needs. So I found gulp-npm-dist and have a gulpfile.js
var gulp = require('gulp');
var npmDist = require('gulp-npm-dist');
gulp.task('CopyNodeDependencies', function() {
gulp.src(npmDist(), {base:'./node_modules'})
.pipe(gulp.dest('./node_dependencies'));
});
this places just the modules i need from my package.json:
{
"version": "1.0.0",
"name": "common",
"private": true,
"devDependencies": {
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-npm-dist": "^0.1.2",
"gulp-rename": "^1.2.2",
"pump": "^1.0.1"
},
"dependencies": {
"chart.js": "^2.7.3",
"chartjs-node-canvas": "^2.0.1",
"moment": "^2.24.0"
}
}
but when I run my node file that has var moment = require('moment'); at the top it says cannot find module moment. I have renamed node_dependencies to node_modules and it still throws this error. I have also tried relative paths like ./node_dependencies/moment and that still doesnt work.
here is the folder structure of the node_dependencies if that helps:
You have to leave original node_modules directory as is to use require().
gulp-npm-dist copies only minified files without package.json, yarn.lock etc.
I have a project using Angular.js for which I created some gulp tasks a long while ago. I recently got a new computer and tried to run it but it silently failed (no errors in the log) on my browserify task.
gulp.task('imgs', ['html'], function () {
return gulp.src(paths.img + '*')
.pipe(gulp.dest(paths.dist_img));
});
gulp.task('browserify', ['imgs'], function () {
return browserify(paths.src + 'index.js', {debug: true})
.bundle()
.pipe(source('index.js'))
.pipe(gulpPlugins.rename('bundle.js'))
.pipe(gulp.dest(paths.dist))
.pipe(gulpPlugins.connect.reload());
});
gulp.task('copy-bootstrap-css', ['browserify'], function () {
return gulp.src(paths.custom + "bootstrap/css/*.css")
.pipe(gulp.dest(paths.dist_css));
});
I've been debugging this for a while and noticed it was not failing when I commented out either the rename-pipe or the dest-pipe of the browserify task. Obviously the application is not working correctly when I do. But I couldn't find an actual reason why.
Eventually in complete despair I created a separate variable for the browserify output and then applied the pipes:
gulp.task('browserify', ['imgs'], function () {
var b = browserify(paths.src + 'index.js', {debug: true})
.bundle();
b.pipe(source('index.js'))
.pipe(gulpPlugins.rename('bundle.js'))
.pipe(gulp.dest(paths.dist))
.pipe(gulpPlugins.connect.reload())
return b;
});
Strangely enough that "fixes" it. Meaning that the gulp tasks at least execute completely. The browserify still hasn't run correctly I guess, because I get an "Unexpected end of input" in my browser on the bundle.js, but that might be also be another problem.
Does anyone have an idea why this is "working" when I use a separate variable for the browserify.bundle()?
Any idea whether the remaining problem is related?
Since this might have something to do with versions: I've got the following gulpPlugins in my package.json and am running npm 6.4.1 and node 11.3.0 on my new machine.
"devDependencies": {
"browserify": "^13.1.1",
"chai": "^3.5.0",
"gulp": "^3.9.1",
"gulp-angular-templatecache": "^2.0.0",
"gulp-buffer": "0.0.2",
"gulp-clean": "^0.3.2",
"gulp-connect": "^5.0.0",
"gulp-dest": "^0.2.3",
"gulp-inject": "^4.2.0",
"gulp-load-plugins": "^1.4.0",
"gulp-rename": "^1.4.0",
"gulp-rev-all": "^0.9.7",
"gulp-rev-replace": "^0.4.3",
"gulp-sass": "^3.1.0",
"gulp-streamify": "^1.0.2",
"gulp-util": "^3.0.7",
"http-proxy-middleware": "^0.17.4",
"mocha": "^3.2.0",
"vinyl-source-stream": "^1.1.0"
}
Edit:
When I manually browserify the index.js file this works without problems and the output is a massive file of 64k lines, while the one from my gulp tasks is only 1200.
I restructured the browserify-task and removed the rename, since the filename parameter in the vinyl-source-stream was already doing the renaming, I didn't really need it:
gulp.task('browserify', ['imgs'], function () {
var b = browserify();
b.add(paths.src + 'index.js', {debug: true});
var textStream = b.bundle();
textStream
.pipe(source('bundle.js'))
.pipe(gulp.dest(paths.dist))
.pipe(gulpPlugins.connect.reload())
return b;
});
Note that simply removing the rename pipe and changing the filename of the source pipe didn't do the trick. That resulted in a "no such file or directory" error for some reason. I guess that's why I added the rename pipe in the first place.
I am trying to create a testable front-end project along these guidelines:
React component architecture with __test__ folders in each component folder;
tests use ES6 modules;
browserify bundles everything into one file while babelify transpiles ES6;
karma uses the bundle for testing.
This is my karma.conf.js:
module.exports = function (karma) {
const testFiles = __dirname + '/proj/static/src/**/__tests__/*.js';
karma.set({
frameworks: ['browserify', 'mocha'],
browsers: ['Chrome'],
files: [
testFiles
],
logLevel: 'LOG_DEBUG',
preprocessors: {
testFiles: ['browserify'],
},
reporters: ['dots'],
singleRun: true,
browserify: {
debug: true,
transform: [ 'babelify' ]
},
});
};
This is my .babelrc
{
presets: ['es2015', 'react']
}
However, after launching karma, I get this error:
...
Uncaught SyntaxError: Unexpected token import
at proj/static/src/js/some-component/__tests__/some.test.js:1
Clearly the code doesn't get transpiled. I've read multiple tutorials, and all use different technologies. Any ideas how to fix the problem?
P.S. I am still very fresh with TDD in the front-end.
Edit
These are the installed npm dependencies:
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"expect": "^1.20.2",
"karma": "^1.3.0",
"karma-browserify": "^5.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-mocha": "^1.3.0",
"mocha": "^3.1.2",
"reactify": "^1.1.1",
"watchify": "^3.7.0"
The problem is that testFiles is the value of the key in the preprocessors configuration. You need the value of the key to be a glob that matches the files that are to be preprocessed. No files are being matched, so no files are being preprocessed.
I would try this:
preprocessors: {
'**/*.js': ['browserify']
}
Your question doesn't go into detail about your project's directory structure, so I've suggested a glob that matches all .js files. You could refine it to match only your source files that need to be transpiled.
Be aware that the glob will need to match all of your source files - not just the tests.