My pipeline looks like this:
// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [
// Dependencies like sails.io.js, jQuery, or Angular
'js/dependencies/sails.io.js',
'js/bower_components/angular/*.js',
'js/bower_components/**/*.js',
// All of the rest of your client-side js files
// will be injected here in no particular order.
'js/modules/app.js',
'js/modules/auth/services/accessLevels.js',
'js/**/*.js'
];
and my bower.json:
{
"name": "myapp",
"version": "0.0.1",
"dependencies": {
"angular": "1.3.7",
"angular-cookies": "1.3.7",
"angular-ui-router": "0.2.15"
},
"resolutions": {
"angular": "1.3.7"
}
}
I think this issue is because it's injecting angular.js and angular.min.js, any way to solve this with grunt?
Related
I used (Yeoman) generator-cg-angular to scaffold my AngularJS web-app, and I'm trying to run unit tests without using the html2js preprocessor, but alas it looks like I'm missing something.
I changed the folders tree
As per customer request, I moved index.html, app.js and app.less within a folder named app, so now the folder structure is something like the following:
|--- Gruntfile.js //the Gruntfile.js is in the root folder, just like this generator does out-of-the-box
|___dist
|___unit-test-results
|___node_modules
|___bower_components
|___app
|____app.js
|____app.less
|____index.html
|____directives
|____test-directive
|____test-directive.js
|____test-directive.less
|____test-directive.html
|____test-directive-spec.js
My karma task
karma: {
options: {
frameworks: ['jasmine'],
files: [ //this files data is also updated in the watch handler, if updated change there too
'<%= dom_munger.data.appjs %>',
'bower_components/angular-mocks/angular-mocks.js',
'<%= ngtemplates.main.dest %>',
'directive/**/*.html',
createFolderGlobs('*-spec.js')
],
logLevel:'ERROR',
reporters:['mocha','html'],
autoWatch: false, //watching is handled by grunt-contrib-watch
singleRun: true,
htmlReporter: {
outputFile: 'unit-test-results/unit-tests'+ grunt.template.today('yyyymmdd') +'.html',
// Optional
pageTitle: 'Unit Tests',
groupSuites: true,
useCompactStyle: true
}
},
all_tests: {
browsers: ['Chrome','Firefox']
},
during_watch: {
browsers: ['PhantomJS']
},
},
The test-directive-spec.js
describe('testDirective', function() {
beforeEach(module('myApp'));
beforeEach(module('directive/test-directive/test-directive.html')); //manually written
var scope,compile;
beforeEach(inject(function($rootScope,$compile) {
scope = $rootScope.$new();
compile = $compile;
}));
it('should ...', function() {
var element = compile('<test-directive></test-directive>')(scope);
scope.$digest();
expect(element.text()).toBe('hello world');
});
});
grunt test fails
When I run grunt test configured like this
grunt.registerTask('test',['dom_munger:read','karma:all_tests']);
the html report file says he the tests failed because the templates were not found
Error: [$injector:modulerr] Failed to instantiate module directive/test-directive/test-directive.html due to:
Error: [$injector:nomod] Module 'directive/test-directive/test-directive.html' 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.
So I tried adding the ngtemplates task to grunt test like this
grunt.registerTask('test',['dom_munger:read','ngtemplates','karma:all_tests']);
configuring ngtemplates like this
ngtemplates: {
main: {
options: {
module: pkg.name,
htmlmin:'<%= htmlmin.main.options %>',
url: function(url){ return url.replace('app/','')}
},
src: [createFolderGlobs('*.html'),'!'+ indexHtmlPath +'index.html','!_SpecRunner.html'],
dest: 'temp/templates.js'
}
}
and produces the following templates.js in a temp folder
angular.module('myApp').run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('directive/test-directive/test-directive.html',
"<div>hello world</div>"
);
}]);
But the html reporter still says that the templates are not found.
What am I doing so wrong?
Here's my package.json
{
"name": "myApp",
"version": "0.0.0",
"devDependencies": {
"eslint": "^3.16.1",
"eslint-config-angular": "^0.5.0",
"eslint-plugin-angular": "^1.6.1",
"grunt": "~0.4",
"grunt-angular-templates": "~0.5",
"grunt-browser-output": "0.1.0",
"grunt-contrib-clean": "~0.5",
"grunt-contrib-concat": "~0.3",
"grunt-contrib-connect": "~0.6",
"grunt-contrib-copy": "~0.5",
"grunt-contrib-cssmin": "~0.7",
"grunt-contrib-htmlmin": "~0.1",
"grunt-contrib-jshint": "~0.9",
"grunt-contrib-less": "~0.8",
"grunt-contrib-uglify": "~0.2",
"grunt-contrib-watch": "~0.6",
"grunt-dom-munger": "~3.4",
"grunt-file-exists": "^0.1.4",
"grunt-karma": "~0.8.3",
"grunt-ng-annotate": "^1.0.1",
"grunt-replace": "^1.0.1",
"grunt-timer": "^0.6.0",
"karma": "~0.12.6",
"karma-chrome-launcher": "~0.1.3",
"karma-firefox-launcher": "~0.1.3",
"karma-htmlfile-reporter": "^0.3.5",
"karma-jasmine": "~0.1.5",
"karma-mocha-reporter": "^2.2.2",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-phantomjs-launcher": "~0.1.4",
"load-grunt-tasks": "~0.2"
}
}
After a lot of keyboard facerolling, I've come to this solution:
remove that directive/**/*.html from karma.options.files task configuration, since a) it's not enforcing project "folders-by-feature" structure and b) instead getting the templates from '<%= ngtemplates.main.dest %>' it's solid enough, you just need to change the grunt test task into grunt.registerTask('test',['dom_munger:read','ngtemplates','karma:all_tests']);
remove beforeEach(module('directive/test-directive/test-directive.html')); from test-directive-spec.js, since it looks like it clashes with the previously described ngtemplates mechanism, making the template unavaiable;
I am new to webpack and typings, i am trying to setup new project.
I have globally installed the webpack.
Issues are
Even it is not allowing me to put the code of entrypoint.ts in a module like
module taxCalculator{
[.....entrypoint.ts code.......]
}
webpack build works fine when i avoid point 1 but i am not able to use the testClass in entrypoint.ts while creating mainPageController. when i load the application get following error in console:
taxCalculator.bundle.js:13307 ReferenceError: taxCalculator is not defined
In my entrypoint.ts vs 2013 shows the red error line below the 'require' text.
I have already referred a lot on internet but could not find anything and wasted 4-5 hours of mine, can someone please guide me what i am doing wrong.
Following are my files for reference.
Package.json
{
"name": "taxcalculator",
"version": "1.0.0",
"description": "To Calculate Tax",
"scripts": {
"build": ""
},
"author": "temp",
"license": "ISC",
"devDependencies": {
"ts-loader": "1.3.3",
"typescript": "2.0.0",
"typings": "2.1.0",
"webpack": "1.14.0"
},
"dependencies": {
"angular": "1.5.0"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5"
}
}
typings.json
{
"dependencies": {
"angular": "registry:dt/angular#1.5.0+20170111164943"
}
}
entrypoint.ts
/// <reference path="../../typings/index.d.ts"/>
/// <reference path="TestClass.ts"/>
var angular = require('angular');
var app = angular.module('taxCalculatorApp', []);
app.controller("mainPageController", ["$scope", function(scope) {
scope.testString = "My String Value";
scope.myObj = new taxCalculator.TestClass("Constructor string");
}])
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>Tax Calculator</title>
</head>
<body>
<div ng-app="taxCalculatorApp">
<div ng-controller="mainPageController">
<div>{{testString}}</div>
<div>{{myObj.myString}}</div>
</div>
Loading.....!!
</div>
<script src="../dist/taxCalculator.bundle.js"></script>
</body>
</html>
testclass.ts
module taxCalculator {
export class TestClass {
constructor(public myString) {
}
}
}
In the compilerOptions section of your tsConfig file, add the following:
"moduleResolution" : "node", // or "classic"
"module" : "amd",
The moduleResolution section determines how the tsc compiler looks for modules. A full description can be found on the typescript docs.
The module section describes how each of your modules will be written out. By default this will be CommonJS, which is not what you want. It should probably be amd, which is a front-end friendly module system.
It's a good idea to take a deeper look at all the compiler options and see if any more are relevant for your project. In general, starting off new projects with strict null checks and no implicit any will help you in the long run.
I have installed angular-ladda using browserify-shim / browserify, but am unable to get the buttons to work properly. When I click on the button, the spinner is outside of the button, not matter which data-style I use.
You can find the instructions to browserify install here, but they did not work as I hoped. I ended using the information on this issue on GitHub to help me out, but I'm not sure that I did it correctly.
My app dependencies look like this:
require('angular').module('admin', [
require('Spinner'),
require('Ladda'),
require('angular-ladda')
])
My package.json file dependencies look like this:
"dependencies": {
"aliasify": "^2.0.0",
"angular": "^1.5.7",
"angular-bootstrap-show-errors": "^2.3.0",
"angular-breadcrumb": "^0.4.1",
"angular-cookies": "^1.5.7",
"angular-ladda": "^0.4.2",
"angular-ui-router": "^0.3.1"
}
"browser": {
"angular": "./node_modules/angular/angular.js",
"angular-breadcrumb": "./node_modules/angular-breadcrumb/release/angular-breadcrumb.js",
"spin.js": "./node_modules/angular-ladda/node_modules/js/spin.js"
}
"browserify-shim": {
"angular": {
"exports": "angular"
},
"angular-ladda": {
"depends": [
"ladda"
]
},
"ladda": {
"exports": "Ladda",
"depends": [
"spin.js"
]
},
"spin.js": {
"exports": "Spinner"
}
}
This is a gif of what the final result looks like: http://recordit.co/g2CmpETMC5.gif
What I did not realize is that with browserify-shim, you still have to link the style sheet. In my case, I had to compile the css file into a less file using:
#import (less) "/node_modules/angular-ladda/node_modules/ladda/dist/ladda-themeless.min.css";
I have been working on converting a grunt task to gulp. The grunt file looks like this:
browserify: {
options: {
transform: [ require('grunt-react').browserify ]
},
client: {
src: ['react/**/*.jsx'],
dest: 'public/js/browserify/bundle.js'
}
}
I saw many examples of browserify and gulp but all of them had just a single file start point. To get round this I tried using glob. After several false starts I came up with the following. It runs without error and creates a single bundle.js file, but reactify doesn't seem to be working correctly, as jsx does not seem to be converted so I end up with the error:
Uncaught Error: Cannot find module './components/NoteApp.jsx'
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var glob = require('glob');
var reactify = require('reactify');
gulp.task('browserify', function (cb) {
glob('./react/**/*.jsx', {}, function (err, files) {
var b = browserify();
files.forEach(function (file) {
b.add(file);
});
b.transform(reactify);
b.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./public/js/browserify/'));
cb();
});
});
ddprrt requested some further details on structure so here is how the react folder is laid out. The code is taken from this article which uses this github zip source to demonstrate react and reflux. The project was very close to what I needed as a start point but uses Grunt instead of Gulp.
The react folder is structured like this:
react \ App.jsx
\ Bootstrap.jsx
\ components \ NoteApp.jsx
\ NoteCreationBox.jsx
\ Note.jsx
\ NoteListBox.jsx
\ NoteList.jsx
\ TextArea.jsx
The error is coming from a line in the App.jsx file:
var React = require('react');
var NoteApp=require('./components/NoteApp.jsx');
but changing this line causes the gulp talk to fail with a missing file error.
I guess I got the answer now. It was really some version mixup, reactify seems to be more advanced and handle things differently than the reactify in the original did. Might be because both are still in experimental state. I also guess that React/Reflux moved on, so you ended up with some versions which didn't quite comply. However, you still can fix it and run you app:
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var glob = require('glob');
var reactify = require('grunt-react').browserify;
gulp.task('browserify', function (cb) {
glob('./react/Bootstrap.jsx', function (err, files) {
var b = browserify({
entries: files
}).transform(reactify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./public/js/browserify/'));
cb();
});
});
Instead of using require('reactify'), we take the reactify provided by grunt-react. See the code above. You should just be able to switch the middleware. Also, don't go over all the files, just your main entry point, which is in that case Bootstrap.jsx.
I know that this is rather inconvenient, maybe when you try your own app, start with a fresh setup.
** Update**
that was my package.json afterwards, just working into the previous project:
{
"name": "react-note-app",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"main": "./bin/www"
},
"engines": {
"node": ">= 0.10.0"
},
"dependencies": {
"body-parser": "~1.8.1",
"cookie-parser": "~1.3.3",
"debug": "~2.0.0",
"ejs": "~0.8.5",
"express": "~4.9.0",
"express-session": "^1.8.2",
"morgan": "~1.3.0",
"node-jsx": "^0.11.0",
"react": "^0.11.2",
"reflux": "^0.1.13",
"serve-favicon": "~2.1.3"
},
"devDependencies": {
"browserify": "^9.0.7",
"glob": "^5.0.3",
"grunt": "^0.4.5",
"grunt-browserify": "^3.0.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-nodemon": "^0.3.0",
"grunt-react": "^0.9.0",
"gulp": "^3.8.11",
"react-tools": "^0.11.2",
"reactify": "^1.1.0",
"vinyl-source-stream": "^1.1.0"
}
}
I'm trying to use Browserify + Debowerify to load Angular.js but I get a Uncaught TypeError: undefined is not a function in browser console after I run gulp serve at run the app. When I use npm to install Angular everything works.
In my package.json I have:
{
"browserify": {
"transform": [
"debowerify"
]
},
"devDependencies": {,
"browserify": "^5.10.0",
"browserify-ngannotate": "^0.1.0",
"debowerify": "^0.8.1",
"vinyl-source-stream": "^0.1.1"
...
}
}
I installed Angular with with
bower install angular
And inside my main.js I add:
require("angular");
In my gulpfile.js I have:
...
gulp.task('browserify', ['clean'], function() {
browserify('./app/scripts/main.js')
.transform(debowerify)
.transform(ngAnnotate)
.transform(uglifyify)
.bundle()
.pipe(source('main.js'))
.pipe($.streamify($.rename({suffix: '.min'})))
.pipe(gulp.dest('.tmp/scripts'));
});
...
Here's a pastebin of my bundled js file http://pastebin.com/Uar8VkVMI'm
What is it that I'm doing wrong? Any clues? Thanks!