Essayé de charger Angular Plus d'une fois
J'ai une application échafaudée de qualité supérieure (le générateur de fullstack angulaire).
grunt serve fonctionne bien, mais grunt build produit une distribution qui verrouille la mémoire, très probablement à cause des références circulaires dans angular.
J'ai mis à niveau angulaire à 1.2.15. L'erreur que je reçois est:
WARNING: Tried to Load Angular More Than Once
Avant la mise à niveau, l'erreur était la suivante:
Error: 10 $digest() iterations reached. Aborting!
Il est assez difficile de déboguer car cela ne se produit qu'après la construction/la minification. Tous mes modules sont au format tableau angulaire, donc la DI de minification ne devrait pas poser de problème, mais c'est le cas.
Il n'y a pas de script unique qui provoque cela. La seule façon de s'en sortir, c'est de ne pas initialiser avec mon fichier app.js. Mon fichier app.js est ci-dessous.
Vous pensez à quelque chose?
'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');
Cela pourrait être dû à un certain nombre de problèmes: il s’agit essentiellement du fait que routeProvider ne trouve pas de fichier et ne charge pas récursivement le fichier par défaut.
Pour moi, il s’est avéré que ce n’était pas une minification, mais une concaténation du JS qui posait problème.
angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/listing.html',
controller: 'ListingCtrl'
})
.otherwise({
redirectTo: '/'
});
}]).constant('FIREBASE_URL', 'something');
Vous remarquerez que si l'application ne peut pas trouver un fichier (c'est-à-dire, otherwise), elle sera redirigée vers la racine, qui dans ce cas charge la templateUrl. Mais si votre templateUrl est erroné, cela provoquera une récursion qui rechargera index.html en chargeant angulaire (et tout le reste) encore et encore.
Dans mon cas, grunt-concat a causé l'erreur de templateUrl après la construction, mais pas avant.
Le problème peut survenir lorsque $ templateCacheProvider tente de résoudre un modèle dans templateCache ou via le répertoire de votre projet qui n'existe pas
Exemple:
templateUrl: 'views/wrongPathToTemplate'
Devrait être:
templateUrl: 'views/home.html'
On dirait que personne n’a mentionné cela nulle part, alors voici ce qui m’a motivé: j’avais la directive ng-view sur mon corps. Changer comme ça
<body layout="column">
<div ng-view></div>
...
</body>
arrêté l'erreur.
Cela n'a absolument rien à voir avec app.js. Au lieu de cela, cet avertissement est enregistré lorsque vous incluez la bibliothèque Angular JS plusieurs fois.
J'ai réussi à reproduire l'erreur dans ce JSBin . Notez les deux balises de script (deux versions différentes):
<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>
Code angulaire pertinent sur GitHub .
Dans mon cas, j’avais cette erreur en utilisant jquery ainsi que js angulaire sur la 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>
J'ai enlevé :
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
Et l'avertissement a disparu.
J'ai eu le même problème, le problème était le conflit entre JQuery et Angular. Angular ne pouvait pas définir la bibliothèque complète JQuery pour elle-même. Comme JQLite est suffisant dans la plupart des cas, j’ai d'abord inclus Angular dans ma page Web, puis j’ai chargé Jquery. L'erreur était partie alors.
Je faisais également face à un problème de ce type, où je continuais à obtenir une boucle infinie et où la page se rechargeait à l'infini. Après un peu de débogage, j'ai découvert que l'erreur était due à angular: impossible de charger le modèle avec un identifiant particulier, car le modèle n'était pas présent dans ce fichier.
Soyez prudent avec les URL que vous donnez dans les applications angulaires. Si ce n’est pas correct, angular peut continuer à le chercher, menant à une boucle infinie!
J'espère que cela t'aides!
Si j'avais ce problème aujourd'hui et si je pensais que je posterais comment je l'ai corrigé. Dans mon cas, j'avais une page index.html avec:
<body ng-app="myApp" ng-controller="mainController"
<div ng-view></div>
</body>
et dans mon fichier app.js j'avais le code suivant:
$routeProvider.when('/', {
controller : 'mainController',
templateUrl : 'index.html',
title : 'Home'
}).when('/other', {
controller : 'otherController',
templateUrl : 'views/other.html',
title : 'other'
}).otherwise({
redirectTo : '/'
});
En conséquence, lorsque je suis allé à la page (base_url /), il a chargé index.html, puis à l'intérieur de la vue ng, il a chargé index.html à nouveau et à l'intérieur de cette vue, il a chargé à nouveau index.html .. une charge récursive infinie de index.html (à chaque chargement de bibliothèques angulaires).
Pour résoudre tout ce que je devais faire, je supprimais index.html de routProvider - comme suit:
$routeProvider.when('/other', {
controller : 'otherController',
templateUrl : 'views/other.html',
title : 'other'
}).otherwise({
redirectTo : '/'
});
J'ai eu ce problème avec le stylo code, et il s'avère que c'est simplement parce que je chargeais JQuery avant Angular. Je ne sais pas si cela peut s'appliquer à d'autres cas.
J'ai eu un problème similaire, et pour moi, le problème était dû à des points-virgules manquants dans le contrôleur. La minification de l'application entraînait probablement une exécution incorrecte du code (le code résultant entraînait probablement des mutations d'état, ce qui entraînait le rendu de la vue, puis le contrôleur réexécutait le code, etc., de manière récursive).
J'ai eu ce même problème ("essayé de charger angulaire plus d'une fois") parce que j'avais inclus deux fois le fichier angularJs (sans percevoir) dans mon index.html.
<script src="angular.js">
<script src="angular.min.js">
La capitalisation compte aussi! Dans ma directive, j'ai essayé de préciser:
templateUrl: 'Views/mytemplate'
et a reçu l'avertissement "plus d'une fois". L'avertissement a disparu quand je l'ai changé pour:
templateUrl: 'views/mytemplate'
Corrigez-moi, mais je pense que cela est dû au fait que la page sur laquelle j'ai placé la directive était sous "vues" et non "Vues" dans la fonction de configuration de route.
J'ai le même problème, car j'ai angular deux fois dans 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>
Notez que l'avertissement survient uniquement lorsque le mode html5 est vrai, lorsque mon mode html5 était faux, je ne l'ai pas vu.
Donc, supprimer le premier angular.js résout le problème.
Cela m'est arrivé aussi avec .NET et MVC 5 et après un moment, j'ai réalisé que dans l'étiquette du fichier Index.cshtml
<div data-ng-view=""></div>
à nouveau inclus en tant que scripts de section vous arrive. Pour résoudre le problème côté serveur, je renvoie la vue partielle. Quelque chose comme:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Login()
{
return PartialView();
}
public ActionResult About()
{
return PartialView();
}
}
Mon problème était la ligne suivante (HAML):
%a{"href"=>"#", "ng-click" => "showConfirmDeleteModal()"} Delete
Notez que j'ai un ng-click angulaire et que j'ai une balise href qui passera à # qui est la même page. Je devais juste enlever la balise href et j'étais prêt à partir.
Un autre cas est avec Webpack qui concilie angulaire dans le bundle.js, à côté de l’angulaire chargé à partir de la balise index.html <script>.
c'est parce que nous avons utilisé l'importation explicite de angular dans de nombreux fichiers:
define(['angular', ...], function(angular, ...){
alors, webpack a décidé de le regrouper aussi. nettoyer tous ceux-ci dans:
define([...], function(...){
réparait Tried to Load Angular More Than Once pour une fois et tous.
Le problème pour moi était que j’avais pris une sauvegarde du fichier du contrôleur (js) avec d’autres modifications dans le même dossier et que le regroupement avait chargé les deux fichiers du contrôleur (js original et sauvegarde). La suppression de la sauvegarde du dossier de scripts, qui était fournie, a résolu le problème.
Vous devez changer la route angulaire '/'! C'est un problème parce que '/' demande l'URL de base. Si vous modifiez '/' => '/ home' ou '/ hede', angular fera du bon travail.
Dans mon cas, j'ai index.html qui intègre 2 vues, à savoir view1.html et view2.html. J'ai développé ces 2 vues indépendamment de index.html, puis essayé d'intégrer via route . Tous les fichiers de script définis dans les 2 fichiers html de vue qui étaient à l'origine de cet avertissement. L'avertissement a disparu après la suppression de l'inclusion de fichiers de script angularJS dans les vues.
En bref, les fichiers de script angularJS, jQuery et angular-route.js doit être inclus uniquement dans index.html et non dans les fichiers HTML de vue.
Pour ceux qui ont ce problème à l'avenir, cela a été causé par une fonction de flèche au lieu d'un littéral de fonction dans un bloc run:
// bad
module('a').run(() => ...)
// good
module('a').run(function() {...})
J'avais exactement la même erreur. Après quelques heures, j'ai remarqué qu'il y avait une virgule supplémentaire dans mon fichier .JSON, sur la dernière paire clé-valeur.
//doesn't work
{
"key":"value",
"key":"value",
"key":"value",
}
Ensuite, je l’ai enlevé (le dernier ',') et cela a résolu le problème.
//works
{
"key":"value",
"key":"value",
"key":"value"
}