I'm having problems to debug my babel transpiled ES6 in chrome.
I'm building a simple ES6 style angular app:
Main Controller:
class MainController {
constructor($timeout) {
this.timeout = $timeout;
}
onEvento() {
this.timeout(function() {
alert('hello');
},1500);
}
}
MainController.$inject = ['$timeout'];
export default MainController;
app.js:
import MainController from 'controllers/main.js';
angular.module('app', [])
.controller('MainController', MainController);
angular.bootstrap(document, ['app']);
gulp task:
gulp.task("default", ['clean'], function () {
return gulp.src(['www/**/*.js'])
.pipe(sourcemaps.init({identityMap:true}))
.pipe(babel())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("www/dist"));
});
The transpiler works OK, and the code works. Sourcemaps are generated and chrome loads them.
But when I try to put a breakpoint in the constructor of the MainController, Chrome does not allow it. It puts the breakpoint in the line below ("}" in this case).
I can put a brakpoint in the first line of method "onEvento" and works, but I can't put it on the "alert".
I also tried using browserify instead of System.js, and using browserify the breakpoins works perfectly on Firefox, (Firefox does not load sourcemaps when using System.js) but the same problem happens in Chrome.
Did anybody face this problem?
Related
I've tried several tutorials and looked at many of the solutions provided here. I am new to Angular and currently trying to set up testing for a rather big SPA.
Following this tutorial I have completed:
Angularjs application setup
Karma setup
Our first test
The karma config file is basically the default content, with some references in files and exclude:
// list of files/patterns to load in the browser
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'app/app.js',
'JavaScript.spec.js'
],
I reinstalled the entire test implementation and now the simple test works again. But trying to write a test for a controller does not work:
here is the error message
I changed the path referencing the bower_components and app files in the karma config file. Now the shell running karma returns an error message from the app.js file, saying:
Uncaught ReferenceError: Logging is not defined
Writing a test identical to the one from doucmentation, gives the following error:
Here is the test code:
describe('nyKladdController', function () {
beforeEach(module('app'));
var $controller;
beforeEach(inject(function (_$controller_) {
$controller = _$controller_;
}));
describe('$scope.mixTable', function () {
it('is false', function () {
var $scope = {};
var controller = $controller('nyKladdController', { $scope: $scope });
expect($scope.mixTable).toBeFalsy();
});
});
});
As you can see from the error message: after the app module, the test file start loading the app dependencies. Here is the app.js file:
(function () {
'use strict';
angular.module('app', [
'ngAnimate', 'ngRoute', 'ngSanitize', 'ngResource', 'ngMessages',
'AdalAngular', 'config', 'angular.filter',
'ui.bootstrap', 'ui.mask', 'ui.select', 'ui.validate',
'angular-loading-bar', 'ui.tree', 'ui.tree-filter', 'checklist-model'
]);
})();
In other words: how can i get my tests to load the app dependecies as well.
I had to load in all the app dependencies from app.js in to karma.config file. Now the files array in karma config looks like this:
// list of files / patterns to load in the browser
files: [
//bower modules
'./bower_components/angular/angular.js',
'./bower_components/angular-mocks/angular-mocks.js',
'./bower_components/angular-ui-mask/src/mask.js',
'./bower_components/angular-ui-select/dist/select.js',
'./bower_components/angular-ui-tree-filter/dist/angular-ui-tree-filter.js',
'./bower_components/angular-ui-tree/dist/angular-ui-tree.js',
'./bower_components/angular-ui-validate/dist/validate.js',
'./bower_components/angular-loading-bar/build/loading-bar.js',
// node modules
'./node_modules/angular-animate/angular-animate.js',
'./node_modules/angular-route/angular-route.js',
'./node_modules/angular-sanitize/angular-sanitize.js',
'./node_modules/angular-resource/angular-resource.js',
'./node_modules/angular-messages/angular-messages.js',
'./node_modules/adal-angular/dist/adal-angular.min.js',
'./node_modules/angular-filter/dist/angular-filter.js',
'./node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
'./node_modules/bower-config/lib/Config.js',
'./node_modules/checklist-model/checklist-model.js',
//app file
'./app/app.js',
'./app/common/config/config.js',
//test files etc..
'JavaScript.spec.js',
'./app/produkt/ny/controllers/*.js' // tester å hente inn controller som refereres i test filen
],
This may be because Karma is loading the source files in the wrong order. For Angular to work properly, each module must be loaded before any component, services, etc. associated with that module.
To fix this, you can change your Karma configuration to ensure your module files are loaded first.
// list of files / patterns to load in the browser
files: [
'../../bower_components/angular/angular.js',
'../../bower_components/angular-mocks/angular-mocks.js',
'app/**/*.module.js',
'app/**/*.js'
],
This is assuming you're using some kind of naming convention for angular modules (like *.module.js as in the above example). Otherwise you'll have to list the paths to the modules individually.
add beforeEach(module("your-module-name")); => your angular application name from app.js"
describe('check a controller', function () {
beforeEach(module("your module name")); // I think you missed this.
var scope, checkController;
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.new();
checkController = function () {
return $controller('nyKladdController', {
'$scope': scope
});
};
}));
it('has a dummy spec to test 2 + 2', function () {
// An intentionally failing test. No code within expect() will never equal 4.
expect(2 + 2).toEqual(4);
});
});
karma.conf
files: [ // sample order. Include your files accordingly
'src/bower_components/angular/angular.min.js',
'src/bower_components/angular-mocks/angular-mocks.js',
// some sample libraries
'src/bower_components/angular-cookies/angular-cookies.min.js',
'src/bower_components/angular-ui-router/release/angular-ui-router.min.js',
'src/bower_components/angular-resource/angular-resource.min.js',
'src/bower_components/angular-sanitize/angular-sanitize.min.js',
'src/bower_components/angular-loading-bar/build/loading-bar.min.js',
'src/app/app.js',
'src/app/**/*.js',
'tests/unit/**/*.spec.js'
],
exclude: []
I am using ngMock for unit testing in Angular. I now have a browserify \w Angular setup. I have some strange behaviour. When I just load angular-mocks with require('angular-mocks'); my tests and app work. But if I then load it into my Angular app module as an dependency it does not load my Angular app anymore, but my karma test still works:
(function () {
'use strict';
require('angular');
require('angular-route');
require('angular-mocks');
require('./home');
angular.module('greenboxUi', [
'ngRoute',
//'ngMock',
'greenboxUi.home'
]);
}());
If I uncomment ngMock, my app does not load anymore
My browserify-shim:
'angular-mocks': {
path: './app/bower_components/angular-mocks/angular-mocks.js',
exports: 'angular.mock',
depends: {
angular: 'angular'
}
}
My test:
beforeEach(function(){
module('greenboxUi.home');
inject(function($controller){
controller = $controller('HomeCtrl');
});
});
it('test test', function() {
expect(controller.hello).toBe('Hello world');
});
My app does work when just commenting 'ngMock' out, but I just find it a bit strange because the Angular docs do load it with angular.module('app', ['ngMock']).. Is it because browserify wraps the module somehow?
Kind regards, Niels
In fact, ngMock should not be added to the dependencies of "production" project.
See this github issue for more information : https://github.com/angular/angular.js/issues/12137
I'm trying to use ngCordova for my cordova app however, I am getting device is undefined when calling the below:
var app = angular.module('app', ['ngCordova'])...
app.controller('homeController', function ($scope, $cordovaDevice) {
$scope.pageClass = 'page-home';
$cordovaDevice.getPlatform(); // console.log or something.
});
Everything is included correctly and the plugin is installed. What seems to be the problem?
You need to wait for the deviceready event before accessing any of the ngCordova plugins
document.addEventListener("deviceready", function () {
$cordovaDevice.getPlatform();
}, false);
I have a problem to run my tests in Webstorm 8, here is my conf file :
Here is my AngularJS controller :
angular.module('monApp').controller('DashboardCtrl', [
'$scope', function ($scope) {
'use strict';
$scope.foo = 'bar';
}
]);
And my test file :
describe('Controller: DashboardCtrl', function () {
'use strict';
var DashboardCtrl,
scope;
beforeEach(module('monApp'));
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
DashboardCtrl = $controller('DashboardCtrl', {
$scope : scope
});
}));
it('dashboard should be defined', function () {
expect(scope.foo).toBeDefined();
expect(scope.foo).toBe('bar');
});
});
These are very simple, I followed steps of many tutorials, first installed node, then install karma with npm install, and when i run karma with karma start my.conf.js the test pass but it shows Empty test suite.
I precise that in my project, I just have 5 files :
angular.js
angular-mocks.js
the controller
test file
conf file
In the config file, i have added these 4 files with :
// list of files / patterns to load in the browser
files: [
'angular.js',
'angular-mocks.js',
'*.js'
],
When I try to throw the test by right-click I get an error telling : describe is not defined.
Thanks.
I tried to restart from scratch and it appears that my instantiation of my app module wasn't fine, this is better :
var app = angular.module('monApp', []);
app.controller('DashboardCtrl', ['$scope', function ($scope) { ....
And the first problem "empty test suite" was due to wrong basePath in the config file. Anyway, thanks for your answers !
Your my.conf.js must contain :
frameworks: ['jasmine']
And Karma need the bridge to Jasmine framework to be installed :
npm install karma-jasmine --save-dev
By default, karma loads all installed plugins which are starting with "karma-".
I'm in the beginning stages of building a large app with AngularJS and RequireJS. Everything loads find but directives aren't manipulating the DOM as they should. No errors are being reported and rest of the app works fine: Views are loaded and $scope is bindable. Examining the console shows that all the files loaded. I'm assuming this is a lazy load issue in that my directive is simply not loading at the correct time. I'd appreciate any insight into how to properly load directives in this regard. Unless it's a part of Angular's jqLite, please refrain from suggesting jQuery.
config.js
require.config({
paths: { angular: '../vendor/angular' }
shim: { angular: { exports: 'angular' } }
});
require(['angular'], function(angular) {
angular.bootstrap(document, ['myApp']);
});
myApp.js
define(['angular', 'angular-resource'], function (angular) {
return angular.module('myApp', ['ngResource']);
});
routing.js
define(['myApp', 'controllers/mainCtrl'], function (myApp) {
return myApp.config(['$routeProvider', function($routeProvider) {
...
}]);
});
mainCtrl.js
define(['myApp', 'directives/myDirective'], function (myApp) {
return myApp.controller('mainCtrl', ['$scope', function ($scope) {
...
}]);
});
myDirective.js
require(['myApp'], function (myApp) {
myApp.directive('superman', [function() {
return {
restrict: 'C',
template: '<div>Here I am to save the day</div>'
}
}])
});
home.html
<div class="superman">This should be replaced</div>
home.html is a partial that's loaded into ng-view
Angular cannot load directives after it has been bootstrapped. My suggestion is:
Make myDirective.js do a define(), not a require()
Make sure myDirective.js is run before the require(['angular'],...) statement in config.js, e.g. do require(['angular','myDirective'],...). For this to work, myDirective should be shimmed to depend on angular - thanks # David Grinberg.
As a sidenote, take a look at this in Stackoverflow/this in GitHub, we have been trying to do RequireJS + Angular play together.