I'm using Jasmine 1.3 with RequireJS and Grunt. I have a grunt task that does this:
jasmine: {
app: {
options: {
outfile: "<%= config.testPath() %>/jasmine_runner/_SpecRunner.html",
specs: ["<%= config.testPath() %>/specs/*Spec.js"],
template: require('grunt-template-jasmine-requirejs'),
templateOptions:{
requireConfigFile: ['<%= config.appPath() %>/js/config.js','<%= config.testPath() %>/specs/testConfig.js']
}
}
}
}
From the command line, I execute grunt jasmine which gives this error:
Running "jasmine:app" (jasmine) task
Warning: boot is not defined Use --force to continue.
Aborted due to warnings.
PhantomJS is set up to run it in the background. I have done extensive search on what the boot error means but haven't found anything.
Try updating your version of grunt-contrib-jasmine.
Upgrading from 0.5.1 to 0.7.0 fixed this issue for me.
Here's my package.json for reference:
{
"name": "...",
"version": "0.1.0",
"description": "...",
"devDependencies": {
"grunt": "^0.4.5",
"matchdep": "^0.3.0",
"grunt-contrib-concat": "^0.4.0",
"grunt-contrib-uglify": "^0.5.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-compass": "^0.9.0",
"grunt-contrib-requirejs": "~0.4.4",
"grunt-contrib-jasmine": "~0.7.0",
"grunt-template-jasmine-requirejs": "~0.2.0"
},
...
}
Related
I installed angular2-google-maps to use for google maps in my Angular 2 application.
my package.json looks like this:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server -c lite-server-conf.json",
"typings": "typings",
"docker-build": "docker build -t ng2-quickstart .",
"docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
"postinstall": "typings install && npm run tsc"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.14",
"systemjs": "0.19.25",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.6",
"angular2-jwt": "0.1.8",
"jwt-decode": "^1.5.1",
"bootstrap": "^3.3.6",
"font-awesome": "^4.6.1",
"jquery": "^2.2.3 ",
"sweetalert2": "1.3.2 ",
"flexslider": "2.6.0 ",
"angular2-google-maps": "0.9.0",
"google-fonts": "1.0.0"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.9",
"typings":"^0.7.12"
}
}
I then added the relevant modules to my index.html like this:
<script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBiqOVDqRdhXharDKvO4Kx6DHMdzMvVn0" type="text/javascript"></script>
My system.js configuraion:
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'angular2-google-maps': {
defaultExtension: 'js'
}
},
map: {
"angular2-jwt": "node_modules/angular2-jwt/angular2-jwt.js",
"angular2-google-maps": "node_modules/angular2-google-maps/bundles/angular2-google-maps.js"
}
});
System.import('app/main')
.then(null, console.error.bind(console));
System.import('node_modules/angular2-google-maps/bundles/angular2-google-maps.js')
.then(null, console.error.bind(console));
To use the angular2-google-maps in my component I imported it as:
import {ANGULAR2_GOOGLE_MAPS_DIRECTIVES,} from 'angular2-google-maps/core';
At first it threw the not found error(shown below) when I added the
directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES]
but after tweaking the
system.js
configurations it was sorted.
I have a separate component main.ts that I do the bootstrapping in and I also added the module in it like this:
imported it:
import {ANGULAR2_GOOGLE_MAPS_PROVIDERS, NoOpMapsAPILoader, MapsAPILoader} from "angular2-google-maps/core";
and
bootstrap(AppComponent, [ANGULAR2_GOOGLE_MAPS_PROVIDERS,ROUTER_PROVIDERS, HTTP_PROVIDERS, FORM_PROVIDERS, BackendApis,
provide(AuthHttp, {
useFactory: (http) => {
return new AuthHttp(new AuthConfig({
tokenName: 'jwt'
}), http);
},
deps: [Http]
}),
provide(LocationStrategy, {useClass: HashLocationStrategy}),
provide(MapsAPILoader, {useClass: NoOpMapsAPILoader})
]);
Now my problem
The map loads but only after I do reloads like two or three times of the page. my console debug throws this error:
GET http://localhost:8003/node_modules/angular2-google-maps/bundles/angular2-google-maps.js/core.js 404 (Not Found)
This is freaking bad for business cos in production I don't intend to tell users to keep reloading page(and I don't want to do it either!) so I was seeking to know, is my cofiguration ok?
I have tried to tinker with the system.js configurations till I got the map to load but it looks like I brought some serious bug along. Any optimizations or pointers are appreciated.
You actually helped me solve my issue.
It seems like you are mapping to a specific location, rather than to the path you actually need when you import google maps.
Just change:
"angular2-google-maps": "node_modules/angular2-google-maps/bundles/angular2-google-maps.js"
to:
"angular2-google-maps": "node_modules/angular2-google-maps"
Also you could also remove the line and I'm sure it'll work as the paths generally default to node_modules on import.
I am new to yeoman/grunt/bower and I am working on setting up a angularjs project with:
yo angular
I made some changes to gruntfile myself and recently I found protractor very useful and I wanted to add that to my project. I followed a lot of instructions online (like this one Integrating Protractor with Yeoman via Grunt 2 years ago) but I still cannot get protractor properly installed.
Here is my Gruntfile.js: (only showed relevant parts)
'use strict';
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required Grunt tasks
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin',
ngtemplates: 'grunt-angular-templates',
cdnify: 'grunt-google-cdn'
});
// Configurable paths for the application
var appConfig = {
app: require('./bower.json').appPath || 'app',
dist: 'dist'
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: appConfig,
...
...
// Automatically inject Bower components into the app
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//
},
test: {
devDependencies: true,
src: '<%= karma.unit.configFile %>',
ignorePath: /\.\.\//,
fileTypes:{
js: {
block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
},
sass: {
src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}bower_components\//
}
},
...
...
// Test settings
karma: {
unit: {
configFile: 'test/karma.conf.js',
singleRun: true
}
},
protractor: {
options: {
keepalive: true,
configFile: 'protractor.conf.js'
},
run: {}
}
});
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'postcss:server',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('test', [
'clean:server',
'wiredep',
'concurrent:test',
'postcss',
'connect:test',
'karma',
'protractor:run'
]);
};
Here is my package.json:
{
"name": "Website",
"private": true,
"devDependencies": {
"autoprefixer-core": "^5.2.1",
"compass": "^0.1.1",
"grunt": "^0.4.5",
"grunt-angular-templates": "^0.5.7",
"grunt-concurrent": "^1.0.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-compass": "^1.0.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-cssmin": "^0.12.0",
"grunt-contrib-htmlmin": "^0.4.0",
"grunt-contrib-imagemin": "^1.0.0",
"grunt-contrib-jshint": "^0.11.0",
"grunt-contrib-uglify": "^0.7.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-filerev": "^2.1.2",
"grunt-google-cdn": "^0.4.3",
"grunt-jscs": "^1.8.0",
"grunt-karma": "^0.12.2",
"grunt-newer": "^1.1.0",
"grunt-ng-annotate": "^0.9.2",
"grunt-postcss": "^0.5.5",
"grunt-protractor-runner": "^3.0.0",
"grunt-svgmin": "^2.0.0",
"grunt-usemin": "^3.0.0",
"grunt-wiredep": "^2.0.0",
"jasmine-core": "^2.4.1",
"jit-grunt": "^0.9.1",
"jshint-stylish": "^1.0.0",
"karma": "^0.13.22",
"karma-jasmine": "^0.3.8",
"karma-phantomjs-launcher": "^1.0.0",
"karma2": "^0.13.22",
"phantomjs-prebuilt": "^2.1.7",
"protractor": "^3.0.0",
"time-grunt": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "karma start test/karma.conf.js",
"install": "node node_modules/protractor/bin/webdriver-manager update"
},
"dependencies": {}
}
I used jit-grunt ( as default now ) so it will load those plugins for me.
I have surely installed protractor and grunt-protractor-runner following the post I mentioned above and other sources like official website of protractor and grunt-protractor-runner. In my local node_modules:
$ ls node_modules/ | grep protractor
grunt-protractor-runner
protractor
But no matter what I do, I am still getting the error from grunt:
$ grunt protractor
jit-grunt: Plugin for the "protractor" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings
Warning: Task "protractor" failed. Use --force to continue.
And running grunt test:
$ grunt test
Running "clean:server" (clean) task
>> 1 path cleaned.
...
...
Running "karma:unit" (karma) task
01 05 2016 15:03:51.048:WARN [watcher]: Pattern
01 05 2016 15:03:51.094:INFO [karma]: Karma v0.13.22 server started at http://localhost:8080/
01 05 2016 15:03:51.112:INFO [launcher]: Starting browser PhantomJS
01 05 2016 15:03:52.259:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#68w8QMUehAm8AAf2AAAA with id 17032121
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 2 of 2 SUCCESS (0.003 secs / 0.026 secs)
jit-grunt: Plugin for the "protractor" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings
Warning: Task "protractor:run" failed. Use --force to continue.
Aborted due to warnings.
Is there something I missed? I have been stuck with this for days. Any help is much appreciated.
Thanks for the suggestion and hint from #theaccordance. Turns out that JIT-grunt probably has some difficulty loading grunt-protractor-runner.
Adding grunt.loadNpmTasks('grunt-protractor-runner'); in Gruntfile.js will resolve the problem.
The accepted answer follows an anti-pattern and defeats the purpose of the JIT (Just In Time) plugin loader for Grunt.
The goal of jit-grunt is to automatically load the required plugins and thus makes the use of grunt.loadNpmTasks obsolete.
The documentation for jit-grunt explains how the plugin loader is looking for the plugins:
Will automatically search for the plugin from the task name. Search in
the following order:
node_modules/grunt-contrib-task-name
node_modules/grunt-task-name
node_modules/task-name
Since you have a task protractor, the plugin loader will try to find a corresponding plugin in this order:
grunt-contrib-protractor
doesn't exist in packages.json
grunt-protractor
doesn't exist in packages.json
protractor
found in packages.json!
unfortunately there is a mismatch
the required plugin for the task protractor is grunt-protractor-runner
In this case we can set the static mapping, as the error message points out. We do this in the format taskname: grunt_plugin_name:
// Automatically load required Grunt tasks
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin',
ngtemplates: 'grunt-angular-templates',
cdnify: 'grunt-google-cdn',
protractor: 'grunt-protractor-runner'
});
This is an old question, but I hope my answer can help other people who encounter this problem.
I git clone a spookyjs from github to my shell, then npm install and run node examples/hello.js.
Everything goes well and hello.js outputs:
Hello, from Spooky the Tuff Little Ghost - Wikipedia, the free encyclopedia
Then I add some dependencies to the package.json:
From
"dependencies": {
"underscore": "1.3.x",
"async": "0.1.x",
"tiny-jsonrpc": "0.2.x",
"carrier": "0.1.x",
"duplexer": "0.0.x",
"readable-stream": "~1.0.2"
}
To
"dependencies": {
"underscore": "1.3.x",
"async": "0.1.x",
"tiny-jsonrpc": "0.2.x",
"carrier": "0.1.x",
"duplexer": "0.0.x",
"readable-stream": "~1.0.2",
"express": "^4.13.4",
"bluebird": "^3.3.4",
"body-parser": "~1.13.2",
"consul": "^0.23.0",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"native-dns": "^0.7.0",
"node-phantom": "^0.2.5",
"serve-favicon": "~2.3.0",
"util": "^0.10.3",
"webpage": "^0.3.0"
}
Then I npm install, and run node examples/hello.js again. But now it failed with weird logs:
{ id: 1,
code: -32603,
message: 'undefined is not a constructor (evaluating \'require(\'webpage\').create()\')' }
{ id: 2, code: -32603, message: 'Type error' }
{ id: 3, code: -32603, message: 'Type error' }
My question is, why does adding some dependencies to SpookyJS lead to such an error and how can this error be avoided?
Posted that question to the github. The main developer of SpookyJS(lawnsea) answered me:
Sounds like that package (webpage) is conflicting with the native
PhantomJS module webpage. You will not be able to use those together.
I don't think you'll be able to use a package named webpage. You could
create another npm package that wraps it under a different name.
I'm using material-ui for my website and the package found on npm is out of date with their most recent version (found on Github). I manually added in this line of code into their Theme Manager class, which reflects the changes:
setContentFontFamily(newContentFontFamily) {
if (typeof newContentFontFamily !== "undefined" && newContentFontFamily !== null) {
this.contentFontFamily = newContentFontFamily;
this.component = Extend(this.component, this.template.getComponentThemes(this.palette, this.spacing));
}
},
However, my application hasn't registered these changes and when I try to set a font:
ThemeManager.setContentFontFamily('Open Sans, Roboto, sans serif');
The console gives me this error:
Uncaught TypeError: ThemeManager.setContentFontFamily is not a function
I'm using Browserify to bundle my client side 'require' dependencies. Is this a Browserify issue, an npm issue, or am I not understanding how node modules work?
Edit: Here's my package.json
{
"name": "FooProject",
"version": "0.0.0",
"description": "",
"dependencies": {
"highlight.js": "^8.7.0",
"material-ui": "callemall/material-ui",
"react": "^0.13.3",
"react-bootstrap": "^0.24.5",
"react-highlight": "^0.5.0",
"react-tap-event-plugin": "^0.1.7",
"underscore": "^1.8.3"
},
"author": "Tina Zheng",
"devDependencies": {
"babelify": "^6.1.3",
"bower": "^1.4.1",
"browserify": "^11.0.1",
"gulp": "^3.9.0",
"gulp-react": "^3.0.1",
"gulp-reactify": "^3.0.1"
}
}
A fast solution to your problem (aside from contacting the authors and asking them to update the npm) is to use the repository url as a dependency instead of the npm module:
git://github.com/user/project.git#commit-ish
If the repository is on GitHub you can use the short form:
"dependencies": {
"express": "visionmedia/express",
"mocha": "visionmedia/mocha#4727d357ea"
}
(docs)
If you just edit the dependencies directly, they will be overwritten every time there's a rebuild.
I am trying to run a simple bare bones grunt task and it is not working. I installed using npm install from this package:
{
"name": "ent-nmo-fasg-younger-mills-em-1",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-email-builder": "^3.0.1"
}
}
Then in my Gruntfile.js I have added this code:
module.exports = function(grunt) {
grunt.initConfi({
pkg: grunt.file.readJSON('package.json'),
emailBuilder: {
files : [{
expand: true,
src: ['dev/*.html'],
dest: 'dist/',
}]
}
});
grunt.loadNpmTasks('grunt-email-builder');
grunt.registerTask('dist',['emailBuilder']);
};
The error I am getting in terminal after trying to run "grunt dist" is:
Loading "Gruntfile.js" tasks...ERROR
TypeError: undefined is not a function
Warning: Task "dist" not found. Used --force, continuing.
My problem was a simple spelling error in the grunt configuration.