I am trying to configure jshint in package.json. I am using gulp and this is an angular project. I have added the below code in package.json
"jshintConfig":{
"globals":{
"angular": false
}
}
But it seems jshint is not picking it up.
I did this to avoid the below error I was getting on running jshint
line 3 col 1 'angular' is not defined.
Not all editors support reading jshint configuration from package.json.
For example, check out this discussion for Atom in which they ended up implementing it after all (it wasn't supported in the beginning).
I would invite you to move your settings outside package.json and use the .jshintrc approach instead. In fact, even jshint itself is using that approach as you can see in their repo. The .jshintrc is more dynamic, as you can place different .jshintrc files per folder and fine-tune your settings (e.g. different settings for your unit tests folder and different settings for your client side scripts).
An example of it working is at https://stackoverflow.com/a/26288458/1587329, which uses "angular": true. Alternatively, you can try to use
"jshintConfig": {
"predef": ["angular"]
}
Related
I wanted to do an Angular graph for my current project in StackMEAN, and I found this solutions:
https://www.npmjs.com/package/grunt-angular-modules-graph
https://www.npmjs.com/package/grunt-angular-architecture-graph
But, I don't understand how it works, and how I can configured it correctly.
Which is the Gruntfile.js? It's the Gruntfile.js that is inside my node_modules/grunt-angular-architecture-graph? Or another?
I'm not sure about how to modificated that file:
grunt.initConfig({
'modules-graph': {
options: {
// Task-specific options go here.
},
your_target: {
files: {
'destination-file.dot': ['src/*.js']
}
},
},
});
What is exactly destination-file.dot? Where is it located? And what is ['src/*.js']? Is it my code source? What happens if I got my source into folders?
In the other hand, I don't know how to run Grunt task, or if they are
automatically done when I do "npm install".
Also, is there solution more easy to do a Angular graph?
First of all I don't know if you're really using MEAN.JS, or another mean stack project. If you're using the latest MEAN.JS I believe it now uses only Gulp instead of Grunt. Eitherway if you see a file named gruntfile.js in your project root directory, then you're good to go.
Since grunt-angular-modules-graph advises to use grunt-angular-architecture-graph instead, I'll give some instructions regarding it.
As stated in grunt-angular-architecture-graph docs, you just have to enable its task in your project's gruntfile.js file with this line:
grunt.loadNpmTasks('grunt-angular-architecture-graph');
Then add the following code block, where you must set the path for all your js files (related with Angular):
angular_architecture_graph: {
diagram: {
files: {
// "PATH/TO/OUTPUT/FILES": ["PATH/TO/YOUR/FILES/*.js"]
"architecture": [
"<%= projectConfig.app %>/<%= projectConfig.project %>/**/*.js"
]
}
}
}
Then you have to register the task:
grunt.registerTask('diagram', ['angular_architecture_graph']);
After this configuration you can use Grunt to run the task by going to your project root directory (where your gruntfile.js is located) and do the following command in the console:
grunt diagram
If everything is set correctly the task should be executed.
For more information regarding Grunt and how to create and register task, I suggest reading the official Grunt documentation.
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'm trying to figure out how to make my unit tests in my reactJS ES6 application. My application is already using es6 module system, transpiled with jspm/babel to systemJs.
I found babel-jest as preprocessor but even with it, I can't run my tests because jest can't find SystemJs. ("System is not defined" error is shown in the console)
In the browser, as explained in jspm documentation, SystemJs is loaded globally. I guess I should load SystemJs inside my preprocessor, but How can I make systemJs available for loading additional modules in my tests?
Thanks in advance
Unfortunately, Jest does not support SystemJS ES6 modules at the moment.
See the following comments:
So it sounds like jest assumes that your modules resolve based on the Node resolution algorithm.
Unfortunately this isn't compatible with SystemJS's resolution algorithm.
If there was a way in jest to set a "custom resolver" algorithm through an API then we could plug jspm into jest, but I'm not sure if this is currently possible.
-- Comment by Guy Bedford, creator of SystemJS, Jun 2015
It is unlikely there'll be official support for [SystemJS] unless it is a community contribution.
-- Comment by #cpojer, Jest Collaborator, Jan 2016
Also see the following issue: Invalid URL is thrown when requiring systemjs in jest test cases
in essence to get Jest to play nice with an app running on JSPM/SystemJS you need to "teach" it about all the mapping it holds in the config.js file (or however you call System.config())
the long answer is that you need to create an entry for each dependency you have installed with JSPM like this:
//jest configuration
moduleNameMapper: {
...
"^redux$": "redux#3.6.0",
...
}
for each alias you have, you need at least one entry:
moduleNameMapper: {
...
"^common\\/(.*)": "<rootDir>/src/common/$1", //for a dir alias
"^actions$": "<rootDir>/src/actions/index", //for a file alias
...
}
you also need to have these mappings in your nodeNameMapper:
moduleNameMapper: {
...
"^npm:(.*)": "<rootDir>/jspm_packages/npm/$1",
"^github:(.*)": "<rootDir>/jspm_packages/github/$1",
...
}
and finally, you need to have this moduleDirectories config:
moduleDirectories: ["node_modules", "jspm_packages/npm", "jspm_packages/github"]
this isnt really practical because you dont want to keep two copies of all your dependencies registry and have to sync them when they change...
so the short and better answer, you use my gulp-jest-jspm plugin :)
even if you dont use gulp, you can use its getJestConfig() method to generate the config for you before you run Jest.
I have "angular-i18n" installed as a bower dependency.
When I run grunt serve or grunt build I have receive warning:
angular-i18n was not injected in your file. Please go take a look in
"/$APP_ROOT/bower_components/angular-i18n" for the file you need, then
manually include it in your file.
How can I remove this message?
Does making grunt insert this file into my index.html remove this warning?
Background
It appears that your Grunt tasks are using wiredep to look at your Bower dependencies and inject the tags for loading their associated files (link for CSS, script for JS, etc) into your HTML.
wiredep does this by looking at the bower.json file on your project to figure out what you need, then looking in the bower.json file of each dependency to figure out what they need, and so on. Having developed a dependency tree, wiredep uses the main property in the bower.json files to determine what files from each needed package should be linked into your HTML.
When a package does not have an appropriate bower configuration (missing bower.json or missing/improper main property), wiredep warns you about that problem so that you know it couldn't automatically add what you need. In other words, it's telling you that not all assets have been added to your built HTML, and that you need to manually intervene to add what's missing.
General solution
Generally, there is nothing you can do in your own code to correct this. Manually linking the file in your HTML (outside of the wiredep marked areas so as to avoid having it overwritten) will ensure your project works. wiredep, however, will always warn you when it runs because the package itself still has the problem. You'd need to open an issue to the owner of the problem package in order to ask them to correct their packaging meta info.
The project you're having issues with
I searched bower for the angular-i18n package and found that the project is hosted at https://github.com/angular/bower-angular-i18n . If you look at angular-i18n's bower.json you can see that it is missing the main property. This is why the warning is being issued.
As it turns out, though, it seems appropriate that this project does not offer a main property. The documentation for angular-i18n shows that you should bower install it, then manually link to the file that is appropriate for your desired locale. It would not be appropriate for this package to list a main file because it provides many files, none of which should be dictated as necessary by the package--it's a developer choice.
A possible solution for this case
If the warning really bothers you, or you do not like the need to manually link to the file, you could fork this package to your own GitHub account and modify the bower.json file to point main to the file you want loaded. Then you would remove angular-i18n as a dependency for your project, and add your fork's repo as a dependency instead.
Caveats:
This may cause issues keeping up to date if you are unfamiliar with maintaining Git repos/forks.
This will only work if angular-i18n is listed as an explicit dependency of your own project and is not being loaded in as a dependency for another project. If another project is loading this package, you'd have to start forking projects all the way down the tree such that you could override the configuration of each.
All in all, in this case it's probably best to manually link to the file you want and ignore the warning.
I'm getting this error message using angular-i18n in a yeoman project. The wiredep grunt task makes this error message. There are 2 solutions:
1. Exclude angular-i18n and include the file manually in the index.html
Gruntfile.js
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//,
exclude: [
'bower_components/angular-i18n'
]
}
}
index.html
<script src="bower_components/angular-i18n/angular-locale_de-de.js"></script>
or:
2. Override/Set main attribute of bower_components/angular-i18n/bower.json
Gruntfile.js
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//,
overrides: {
'angular-i18n': {
'main': 'angular-locale_de-de.js'
}
}
}
}
I choose to go with the second option overriding the main attribute. This way in the index.html the angular-i18n library still gets automatically injected by the grunt task.
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/**']
}
}
},
});