I've installed karma. I've created a karma.conf.js file and pointed to my source files. In my source files is included a version of require.js.
Everything seems fine (it launches the node server, and Webstorm CLI connects to it properly) except it barfs when loading backbone style files that begin with define(... In my output I get
Uncaught ReferenceError: define is not defined
at http://localhost:9876/base/src/main/app/App.js?f2880b74f1e96a210ff36e8394daa946c9d11294:1
When I jump to code, the line indicated is just define( at the top of a backbone js file.
I've tried explicitly including require in my lib directory (which should have already been included from the wildcard)
Do I need some boilerplate somewhere to not muddle (possibly conflicting) require.js's? I tried ignoring require... but the result was the same.
exclude: [
'**/*.scss',
'**/*.css',
'**/Gruntfile.js',
'**/docs/*.js',
'**/main/resources/js/lib/crypto-js-3.1.2/*.js',
'**/main/resources/js/lib/require-2.1.2.min.js' // same error when ignored
],
Only mildly related: I'm running karma from webstorm.
I believe you have to include 'requirejs' in your frameworks. Make sure you include the requirejs string before others, ie:
frameworks: ['requirejs','jasmine']
Related
So I'm working on an older solution where we're on Angular 1.6. I decided to make it somewhat more up to date by adding using ES6. We're using grunt as a task runner so I introduced babel as a watch-task, where I add transpiled files to its own dir. After that I concatinate the files to one big file using grunt-contrib-concat, and then minify by using grunt-contrib-uglify. The concatinated file runs fine, but when minified a function from babel is hoisted and with this, breaks angular when I try to run my site.
This is added to the top of the .min.js file
"use strict";function _asyncToGenerator(e){return function(){var t=e.apply(this,arguments);return new Promise(function(e,n){return function o(r,i){try{var a=t[r](i),d=a.value}catch(e){return void n(e)}if(!a.done)return Promise.resolve(d).then(function(e){o("next",e)},function(e){o("throw",e)});e(d)}("next")})}}
In the concatinated file, this file is added at line 3700 and doesn't break execution. Anyone tips would be greatly appreciated
Edit: This is different from the problem described bellow as all angular controllers, directives, services etc are annotated correctly.
I have two config files I'd like to compile together using webpack. I found out that if I have two config files imported as clientConfig and serverConfig, and I pass them within an array to the webpack([clientConfig, serverConfig]).run(... call, they'll get both bundled.
However I now have a dependency where the serverConfig compilation needs a files generated by the clientConfig compilation. I have set clientConfig first in the array expecting webpack to first handle clientConfig and then serverConfig, but it seems not to be happening, since serverConfig compilation complains about the missing file, even though when checking in the output folder, it exists after the error.
Is there any way to tell webpack to wait for the first compilation before starting the next one, without having to split this in two webpack().run... calls?
Thanks!
I'm using Angular, and as you know, there is Angular "1" (the old version) and Angular 2 (the newest) which include typescript.
This is my problem I've encountered today:
I'm doing an application using angular, so I've created the project folder (project-frontend) and installed locally grunt, with bower I've downloaded the packages for angular.
I've created the gruntfile.js and configured it with these tasks:
"grunt-contrib-concat": "^1.0.1"
"grunt-ng-annotate": "^2.0.2"
"grunt-contrib-uglify": "^2.0.2"
And with many others, like cssmin, htmlmin etc etc, but the problems occours with these tasks, or, precisely with uglify.
The problem is that if I concat all angular js files (angular.js, angular-rout.js, angular-resource.js ...) and I uglify everything, then, when i deploy my war in a Tomcat, i get this error:
TypeError: b is undefined
So, what i think that cause the problem is uglify, because I've tried to run the same tasks for another old project, which was having uglify 1.0.1 and everything works, I've also controlled that if I just run concat and ngAnnotate, the final angular files (the one from this project, and the one from the last) are pratically identical.
I don't know if this has to do something with typescript (seeing the error I thinked about that) because I assumed that typescript have been inserted into angular since 2.0.0 versions, and I'm currently working with a 1.5.8 version (I also tried 1.2.9).
I controlled my application code with jshint (it's the first task that i run) and there are no errors prompted in the terminal.
I've also tried to re-configure the tasks taking as example the old project Gruntfile.js file.
I don't know what to do anymore, I'm blocked with this problem and I don't know how to move further, some advices?
Ok, now that i've found the error, as i writed in the comments under my question, i figured out that concatenating js files like this:
src: 'bower_components/**/*.js'
Which should concatenate all js files inside folders and subfolders in my bower_components directory, simply don't know why but breaks angular final files, if i write
src: ['bower_components/angular/*.js',
'bower_components/angular-route/*.js',
'bower_components/angular-resource/*.js']
Which points directly to all files that need to be concatenated, everything works in my application with angular concatenated and uglified file
I don't know why there's this issue, beacuse if i print in terminal under my project-frontend folder this command:
echo bower_components/**/*.js
I can see this output:
bower_components/angular/angular.js bower_components/angular-resource/angular-resource.js bower_components/angular-route/angular-route.js
By the way this seems to be a solution to this type of problem, I hope this helps somebody in the future
I am working on an angularjs site - angular is already included. We have code that loops through js scripts in a specific folder and adds them to a bundle, so the script references get emitted on the main page (we are using single page architecture).
I have not explicitly tried to invoke the code, it is currently just getting included, yet when I bring up my site, I now get the following js errors:
Uncaught ReferenceError: require is not defined
and it's happening here:
var gulp = require('gulp'),
I did not use bower to install - I just pulled the source and dropped the folders into the folder that gets parsed for emitting the js scripts.
Is there something else I need to install?
shershen, that is what I came to realize.
I removed all the misc files in the folder and just left the Chart.min.js and the angular-chart.min.js files and then I was good to go.
I'm using Yeoman 1.0 and the latest version of the Backbone generator and everything I've written is working in development, however when I $ grunt build the resulting /dist is throwing the error:
Uncaught ReferenceError: Backbone is not defined
Unfortunately, since the js has been minified, trying to debug is almost pointless. Is there a way to "build" without the minification? I've tried playing around with settings in the gruntfile but can't seem to find the right options for the right task.
Can you share your GruntFile.js to check the configurations?
By the way, you can omit the minification, don't use uglify or whatever task you have been running so, give it a try to grunt-contrib-copy task which copies the files to designated folder (prod/dist).
https://github.com/gruntjs/grunt-contrib-copy
// Configuration goes here
grunt.initConfig({
// Configure the copy task to move files from the development to production folders
copy: {
target: {
files: {
'prod/': ['dev/**']
}
}
},
});