AVERTISSEMENT: J'ai essayé de charger angulaire plusieurs fois. JS angulaire
J'essaie de voir mon application après avoir exécuté Grunt Build. J'utilise grunt serve: dist pour voir toutes les versions prêtes à la production mais dans le navigateur, une boucle infinie s'affiche:
AVERTISSEMENT: J'ai essayé de charger angulaire plusieurs fois.
J'ai lu cela se produit parce que le TemplateURL: peut être faux après la concaténation. Comme dans cet article: J'ai essayé de charger Angular plusieurs fois
Mais comment puis-je résoudre ce problème? Voici mon app.js
/* global libjsapp:true */
'use strict';
var libjsapp = angular.module('libjsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
]);
libjsapp.config(['$routeProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/posts.html',
controller: 'PostsCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
Dans mon cas, cela était dû au code html suivant:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testapp</title>
</head>
<body ng-app="testApp">
<main ui-view>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
Comme vous pouvez le constater, le <main> n'est pas fermé. Cela a conduit à ma variante de 'AVERTISSEMENT: j'ai essayé de charger angulaire plusieurs fois. problème.
Ce problème est également dû à l'utilisation de la page actuelle en tant que templateUrl. Ceci est particulièrement problématique car il en résulte une boucle infinie se référant encore et encore.
Si vous obtenez une boucle infinie qui bloque votre page, c'est probablement ceci. Si vous obtenez des erreurs CORS, cela est probablement dû à l’inclusion d’une balise de script provenant d’un autre domaine dans votre modèle.
$routeProvider.when('/', {
templateUrl: 'an/absolute/url/to/the/current/page.html'
});
J'ai eu ce problème parce que mon chemin templateUrl était incorrect car mon index.html était dans une structure racine différente. Essayez de tester le chemin de l'URL en utilisant simplement template au lieu de templateUrl.
Placez une image dans votre dossier views et essayez ceci.
$routeProvider.when('/', {
template: 'Test Template <img src="views/pic.jpg"/>',
controller: 'PostsCtrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
Vous devriez voir "Modèle de test" et l'image apparaître sur votre page d'index. Si l'image ne s'affiche pas, votre chemin est mauvais.
Je suis tombé sur le même problème. Mais dans mon cas, avec Webpack build, deux versions angulaires différentes ont été emballées (Angular 1.5.5 et Angular 1.5.0).
Oui, j'ai trié le problème en déplaçant post.html en partiels et en modifiant templateUrl en partials/posts.html. Je pense que cela pourrait être dû à l'échafaud Yo que j'ai utilisé et qui était plein, car il fonctionne bien dans le projet voir. Merci quand même
Je confirme tout ce qui précède (généralement des erreurs de routage ou une erreur sur les chemins de ressources ou une erreur ng-app).
Je voudrais ajouter seulement un point pour aider à trouver l'erreur (pas en cas de mauvaise application).
Si nous supposons que le serveur pour angular est réglé comme suit:
- / static/* pour toutes les ressources statiques (js, css, png ...)
- / api/* reste api
- / * tous les autres appels seront redirigés vers index.html
Ainsi, tout chemin incorrect renverra index.html au lieu de png, css, js et tpl, même s'il manque/static/path ou manquer de renvoyer 404 pour les ressources statiques manquantes.
en bref: consultez le journal sur le serveur quels chemins appelez-vous pour ouvrir la page , la preuve d'erreur pourrait être trouvée à cet endroit.
Le problème est en fait lié au chargement trop fréquent de la bibliothèque angulaire.
Ma réponse peut sembler trop évidente, mais le code lui-même est correct et il n’ya pas beaucoup d’informations sur ce que le problème peut être. Si vous pouvez publier votre arborescence de dossiers, cela peut être utile.
En attendant, veuillez vous assurer que ces deux choses vont bien avant d’enquêter davantage:
- views/posts.html n'inclut pas de balise de script avec l'appel à la bibliothèque angular.js.
- le fichier views/posts.html est disponible à cet emplacement (utilisez éventuellement un URI complet).
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
Module.Js:
var application = angular.module('flow', ['ngRoute', 'ngResource']);
RouteConfig.Js:
angular.module('flow')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', { templateUrl: '/home/index', controller: 'HomeController' })
.when('/error', { templateUrl: '/Error/Index', controller: 'ErrorController' })
.when('/login', { templateUrl: '/Account/Login', controller: 'AccountController' });
}]);
J'ai récemment eu cette erreur et la façon dont je l'ai résolue était d'aller dans le Web.config et de changer <compilation debug="false" targetFramework="4.5.2"/> en <compilation debug="true" ... /> J'espère que cela aide quelqu'un! À votre santé!
Dans mon cas, l'avertissement était dû à l'inclusion redondante dans le script de "angular-scenario.js" après "angular.js".
Lorsque j'ai supprimé "angular-scenario.js", l'avertissement a disparu.
Nous essayions accidentellement de charger une route inexistante dans un ui-view. La route, cependant, correspondait à une URL valide contenant une application Angular. Au lieu de cela, il a chargé cette application angulaire dans le ui-view, d’où les multiples copies d’Anger.
C'est le cas lorsque le code prend une boucle infinie d'une manière ou d'une autre. Assurez-vous de vérifier s'il y a des redirections dans votre code qui s'appellent plusieurs fois.
Dans mon cas, le fichier de modèle (pas de chaîne) était vide. quand j'ai rempli le fichier de modèle avec du HTML simple, le problème a été résolu. Remplissez views/posts.html avec du code.
Dans mon cas, la bibliothèque angulaire et mon code de module angulaire sont chargés dynamiquement dans une autre application sur laquelle je n’ai aucun contrôle. Et ceux-ci sont chargés au clic d'un bouton. Pour la première fois, cela fonctionne bien, mais lorsque l'utilisateur clique pour la deuxième fois, la bibliothèque et d'autres fichiers se chargent à nouveau et me préviennent.
AVERTISSEMENT: J'ai essayé de charger angulaire plusieurs fois.
var isInitialized = element.injector();
if (!isInitialized) {
angular.bootstrap(angular.element(document.getElementById('#mainDiv')), ['defaultApp']);
}
Dans mon cas, app-view-segment="1" était manquant et il y avait deux références pointant vers le même dossier angular dans le fichier index.cshtml, dans les lignes @Scripts.Render. Merci pour le pointage sur le routage angulaire.
La dernière fois que cela m'est arrivé, il s'agissait d'un «/» dans le templateUrl d'une route, ce qui n'était pas supposé être là.
Cependant, cette fois, c’est un tas de vues qui n’ont pas été rendues dans le cache du modèle après la construction, car j’ai placé ces vues dans un sous-dossier d’un sous-dossier situé sous le dossier views. Gruntfile.js n'a pas été réglé pour récupérer les dossiers de 3ème niveau dans '/ views'.
Pour savoir ce qui a été rendu dans une construction yo-grunt, vous pouvez consulter .tmp/templateCache.js à la fin de la construction.
Je souhaite que l'équipe d'AngularJS LTS trouve le moyen de mieux gérer ce type d'erreur, en fournissant un indice plus précis du problème.
J'espère que cela t'aides!
Juste pour ajouter un scénario possible à ce problème ...
Comportement : tout fonctionne correctement lorsqu'il est chargé à partir de l'URL racine, mais vous rencontrez ce problème lorsque vous chargez votre page à partir d'une autre route (ou que vous entrez une autre route).
Raison probable : l'un de vos composants ou pages imbriqués charge quelque chose depuis un chemin relatif au lieu d'un chemin absolu.
Dans mon cas, il s'agissait d'un composant référencé chargeant son modèle avec un chemin relatif.
Donc, par exemple, changeant de ceci:
angular.
module('app').
component('profileSelect', {
// this line was the problem
templateUrl: 'static/angular/profiles/profile-select.html',
bindings: {}
});
pour ça:
angular.
module('app').
component('profileSelect', {
// making this an absolute path fixes it
templateUrl: '/static/angular/profiles/profile-select.html',
bindings: {}
});
Résolu le. Fondamentalement, parce que vous avez maintenant des sous-chemins, ces références relatives ne fonctionnent plus, et angular décide d’échouer de cette manière extrêmement difficile à déchiffrer.
J'espère que cette réponse aidera quelqu'un. Je viens de perdre une heure + de ma vie à cela ...
Votre solution peut fonctionner localement, par exemple si votre service Grunt est en cours d'exécution, mais lorsque vous exécutez une construction Grunt, votre vue risque de ne pas être incluse dans le répertoire dist. Par exemple, si vous avez une vue et qu'elle se trouve dans vues> modèles>modulestout élément supérieur àdeux niveauxne sera pas ajouté lorsque vous exécuterez grunt build par défaut. Au moins c'était le cas pour moi. Vérifiez si votre fichier html est inclus dans le répertoire dist dans les vues. Si ce n'est pas ajouter vos fichiers manuellement pour vérifier que cela fonctionne, alors mettez à jour votre fichier grunt en conséquence.
Dans mon cas, le problème était lié à AngularJS Batarang Chrome Extension (version 0.7.1). Une fois que j'ai désactivé l'extension, l'erreur a disparu.