I'm using Meteor, Angular and Ionic. I'm having a hard time changing from state A to state B as I keep getting the error 'only one instance of babel/polyfill is allowed'. I tried cleaning up the following code as much as possible. Note that I can change to other states successfully.
Here's my routes.js file:
.state('create-group', {
url:'/create-group:/:buddyId',
templateUrl: 'client/templates/create-group.ng.html',
controller: 'createGroupCtrl'
})
Here's my State A template:
<ion-item ng-repeat="buddy in buddies" ng-click="createGroup({{buddy}})">
</ion-item>
Here's my State A controller:
angular
.module('app')
.controller('whosDownCtrl', whosDownCtrl);
function whosDownCtrl ($scope, $state, $ionicScrollDelegate, $timeout, $meteor) {
$scope.createGroup = createGroup;
function createGroup(buddy) {
$state.go('create-group', { buddyId: buddy._id});
}
};
Here's my State B controller:
angular
.module('app')
.controller('createGroupCtrl', createGroupCtrl);
function createGroupCtrl ($scope, $stateParams) {
var clickedUser = $stateParams.buddyId;
}
Can anyone see what i'm doing wrong?
Did you manually add a babel/ecmascript package to meteor?
Check your .meteor/packages file and your .meteor/versions file because that error means there are multiple conflicting versions of babel added to your project.
And since all babel related meteor packages are independent wrappers, it is very likely to get such conflict.
Remove the "excess" babel packages and you'll be good to go.
I know this is very old question but I landed here while analysing my issue. Posting here my learning as it may help others.
I was also getting the same error in my project. It was happening because there were issues with correct template and controller resolution.
Here is a related github issue that helped in clarifying: https://github.com/Urigo/angular-meteor/issues/870
Use hardcoded template instead of templateUrl to analyse the issue properly.
When I try to bind a controller to a template using the angular-ui-router $stateProvider, I run into the following error:
'ShouldWorkController' is not a function. Got undefined.
However, when I declare the controller inside the template using ng-controller, everything works fine. What could be wrong here?
app.ts
module App {
var dependencies = [
MyControllers
]
function configuration($stateProvider: ng.ui.IStateProvider) {
$stateProvider
.state("shouldWork", {
url: "/shouldWork",
templateUrl: "app/shouldWork.html"
controller: "ShouldWorkController" // does not work
});
}
}
shouldWorkController.ts
module App.MyControllers {
interface IShouldWorkViewModel {
}
class ShouldWorkController implements IShouldWorkViewModel {}
}
ShouldWork.html
<div ng-controller="ShouldWorkController as viewModel" us-spinner spinner-key="spinner-1">
^ --- this works nicely
That message means, that such controller "ShouldWorkController" is not loaded int he main angular module. Be sure that you do call register at the end:
module App.MyControllers {
...
class ShouldWorkController implements IShouldWorkViewModel {}
}
// we have to register this controller into some module (MyControllers)
// which is also referenced in the main app module
angular.module('MyControllers')
.controller('ShouldWorkController', App.MyControllers.ShouldWorkController );
I realise this is old, but I came here via Google with the same issue, not for the firs time. Things to check include:
Export statement for your controller class. From the code you posted I see that you are missing an export statement for your ShouldWorkController class. This may not be the issue in your case, but it is something you should check. I can reproduce this error by removing the export statement from my controller classes.
Check your HTML template exists (if using UI-Router). As described in the UI-Router documentation: "The controller will not be instantiated if template is not defined."
Register your controllers in the same file as the controller. Some tutorials do demonstrate controllers being registered in the module file. While this does work, I personally have found it more error prone than directly registering the controller within the controller file.
Check your typescript references. Make sure that you add typescript references (e.g. ///<reference path="../app/services/shouldWorkService.ts">) to typescript files that contain any types that you reference
Check the name of your controller matches that declared in your $stateProvider configuration.
I have an application that only uses an index with a controller main.js. I want the content to be defined by the URL, so I want to use $routeParams in the controller. My problem is that it turns up empty.
This is in my app.js
.config(function ($routeProvider) {
$routeProvider
.when('/:guid', {
templateUrl: '/index.html',
controller: 'MyCollectionUnitCtrl'
})
.otherwise({
redirectTo: '/'
});
});
The controller:
.controller('MyCollectionUnitCtrl',
function ($scope, $location, $routeParams) {
console.log($routeParams.guid); // Undefined
}
I've doubled checked that the module-names are the same.
The problem is that none of the code from the controller runs. I tested this by adding a console.log at the top. Index is not even a template, as I use no partials. I can't find anything about routing when only using one view, so here's where I'm stuck.
It doesn't work when I just define the controller with ng-controller neither.
Ideas? Something I'm missing? Is this a stupid question that's easily explained by documentation? I appreciate all comment, answers and feedback you can give me.
Thank you!
EDIT:
I've also tried to define ng-controller in the index.html, and then only have controller in the routingConfig, but that did not work either.
EDIT2: Plunker
Its hard to find out actual problem with your code snippet, but i think you are missing ngRoute module.
Add angular-route.js script in your html and add ngRoute dependency in your module.
First of all, I would like to say that i really didn't want to ask this question, but after two hours of not understanding the reason of it, it now decide to ask for some help.
I want to add the ngResource module in my app. Before doing it, everything worked well.
So I create my app like this :
var app = angular.module('app', [ 'ngResource', 'ngRoute' ]);
then i config it like this :
app.config(
[
'$resourceProvider',
'$routeProvider',
'$locationProvider',
function ($resourceProvider, $routeProvider, $locationProvider ) {
$resourceProvider.defaults.stripTrailingSlashes = false;
$locationProvider.html5Mode(false);
$routeProvider.when('/', {
templateUrl: 'templates/home.html',
controller: 'homeController'
}).when('/404', {
templateUrl: 'templates/404.html'
}).otherwise({
redirectTo: '/404'
});
}
]);
And i get this error which means :
Failed to instantiate module app due to:
TypeError: Cannot set property 'stripTrailingSlashes' of undefined
at http://localhost:3000/js/app.js:14
This error occurs when a module fails to load due to some exception. The error message above should provide additional context.
line 14 is of course :
$resourceProvider.defaults.stripTrailingSlashes = false;
The angular-resource.js is well loaded and before app.js.
I don't understand, I did it exactly like it's said on the Angular Doc :(
I hope my question isn't completely stupid and the reason is not obvious cause I really don't see where I am wrong!
Thank you if you can help me !
Bastien
The ability to configure stripping of traling slashes was added in AngularJS 1.3.0-beta.6.
Make sure you are not using an earlier version.
The changelog of AngularJS can be found here.
I have a yeoman scaffolded app (the angular fullstack generator).
grunt serve works fine, but grunt build produces a distribution that locks up memory, most probably because of circular references in angular.
I upgraded angular to 1.2.15. The error I get is:
WARNING: Tried to Load Angular More Than Once
Prior to upgrading, the error was:
Error: 10 $digest() iterations reached. Aborting!
It's pretty difficult to debug as it only happens after build / minification. All my modules are in angular's array format, so the minification DI shouldn't be a problem but it is.
There's no single script that causes this. The only way it goes away is if I don't initialize with my app.js file. My app.js file is below.
Any thing come to mind?
'use strict';
angular.module('myApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ngTagsInput',
'ui.bootstrap',
'google-maps',
'firebase'
]);
angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/listing.html',
controller: 'ListingCtrl'
})
.otherwise({
redirectTo: '/'
});
}]).constant('FIREBASE_URL', 'something');
This could be a number of issues: essentially it's a problem of routeProvider not finding a file and recursively loading the default.
For me, it turned out that it wasn't minification but concatenation of the js that caused the problems.
angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/listing.html',
controller: 'ListingCtrl'
})
.otherwise({
redirectTo: '/'
});
}]).constant('FIREBASE_URL', 'something');
You'll notice that if the app can't find a file (i.e., otherwise), then it will redirect to the root, which in this case loads the templateUrl. But if your templateUrl is wrong, then it will cause a recursion that reloads index.html loading angular (and everything else) over and over.
In my case, grunt-concat caused the templateUrl to be wrong after build, but not before.
The problem could occur when $templateCacheProvider is trying to resolve a template in the templateCache or through your project directory that does not exist
Example:
templateUrl: 'views/wrongPathToTemplate'
Should be:
templateUrl: 'views/home.html'
This doesn't have anything to do with app.js at all. Instead, this warning is logged when you include the Angular JS library more than once.
I've managed to reproduce the error in this JSBin. Note the two script tags (two different versions):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
Relevant Angular code at GitHub.
Seems like nobody has mentioned this anywhere so here is what triggered it for me:
I had the ng-view directive on my body. Changing it like so
<body layout="column">
<div ng-view></div>
...
</body>
stopped the error.
I was also facing such an issue where I was continously getting an infinite loop and the page was reloading itself infinitely. After a bit of debugging I found out that the error was being caused because, angular was not able to load template given with a particular id because the template was not present in that file.
Be careful with the url's which you give in angular apps. If its not correct, angular can just keep on looking for it eventually, leading to infinite loop!
Hope this helps!
I had the same issue, The problem was the conflict between JQuery and Angular. Angular couldn't set the full JQuery library for itself. As JQLite is enough in most cases, I included Angular first in my web page and then I loaded Jquery. The error was gone then.
In my case I was getting this error while using jquery as well as angular js on the page.
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/angular-route.js" type="text/javascript"></script>
I removed :
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
And the warning disappeared.
Had this problem today and figured I would post how I fixed it. In my case I had an index.html page with:
<body ng-app="myApp" ng-controller="mainController"
<div ng-view></div>
</body>
and in my app.js file I had the following code:
$routeProvider.when('/', {
controller : 'mainController',
templateUrl : 'index.html',
title : 'Home'
}).when('/other', {
controller : 'otherController',
templateUrl : 'views/other.html',
title : 'other'
}).otherwise({
redirectTo : '/'
});
As a result, when I went to the page (base_url/) it loaded index.html, and inside the ng-view it loaded index.html again, and inside that view it loaded index.html again.. and so on - creating an infinite recursive load of index.html (each time loading angular libraries).
To resolve all I had to do was remove index.html from the routProvider - as follows:
$routeProvider.when('/other', {
controller : 'otherController',
templateUrl : 'views/other.html',
title : 'other'
}).otherwise({
redirectTo : '/'
});
I had a similar issue, and for me the issue was due to some missing semicolons in the controller. The minification of the app was probably causing the code to execute incorrectly (most likely the resulting code was causing state mutations, which causes the view to render, and then the controller executes the code again, and so on recursively).
I had that problem on code pen, and it turn out it's just because I was loading JQuery before Angular. Don't know if that can apply for other cases.
Capitalization matters as well! Inside my directive, I tried specifying:
templateUrl: 'Views/mytemplate'
and got the "more than once" warning. The warning disappeared when I changed it to:
templateUrl: 'views/mytemplate'
Correct me, but I think this happened because page that I placed the directive on was under "views" and not "Views" in the route config function.
This happened to me too with .NET and MVC 5 and after a while I realized that within the label on Index.cshtml file:
<div data-ng-view=""></div>
again included as section scripts happens to you. To solve the problem on the server side what I do is return the partial view. Something like:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Login()
{
return PartialView();
}
public ActionResult About()
{
return PartialView();
}
}
I had this same problem ("Tried to Load Angular More Than Once") because I had included twice angularJs file (without perceive) in my index.html.
<script src="angular.js">
<script src="angular.min.js">
I have the same problem, because I have angular two times in index.html:
<script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
Note that the warning arises only when html5 mode is true, when my html5 mode was false, I did not see this warning.
So removing the first angular.js solves the problem.
You must change angular route '/'! It is a problem because '/' base url request. If you change '/' => '/home' or '/hede' angular will good work.
For anyone that has this issue in the future, for me it was caused by an arrow function instead of a function literal in a run block:
// bad
module('a').run(() => ...)
// good
module('a').run(function() {...})
In my case I have index.html which embeds 2 views i.e view1.html and view2.html. I developed these 2 views independent of index.html and then tried to embed using route.
So I had all the script files defined in the 2 view html files which was causing this warning. The warning disappeared after removing the inclusion of angularJS script files from views.
In short, the script files angularJS, jQuery and angular-route.js
should be included only in index.html and not in view html files.
Another case is with Webpack which concating angular into the bundle.js, beside the angular that is loaded from index.html <script> tag.
this was because we used explicit importing of angular in many files:
define(['angular', ...], function(angular, ...){
so, webpack decided to bundle it too. cleaning all of those into:
define([...], function(...){
was fixing Tried to Load Angular More Than Once for once and all.
My problem was the following line (HAML):
%a{"href"=>"#", "ng-click" => "showConfirmDeleteModal()"} Delete
Notice that I have a angular ng-click and I have an href tag which will jump to # which is the same page. I just had to remove the href tag and I was good to go.
The problem for me was, I had taken backup of controller (js) file with some other changes in the same folder and bundling loaded both the controller files (original and backup js). Removing backup from the scripts folder, that was bundled solved the issue.
I had this problem when missing a closing tag in the html.
So instead of:
<table></table>
..my HTML was
<table>...<table>
Tried to load jQuery after angular as mentioned above. This prevented the error message, but didn't really fix the problem. And jQuery '.find' didn't really work afterwards..
Solution was to fix the missing closing tag.
I was having the exact same error. After some hours, I noticed that there was an extra comma in my .JSON file, on the very last key-value pair.
//doesn't work
{
"key":"value",
"key":"value",
"key":"value",
}
Then I just took it off (the last ',') and that solved the problem.
//works
{
"key":"value",
"key":"value",
"key":"value"
}