wake-up-neo.com

WARNUNG: Es wurde versucht, den Winkel mehrmals zu laden. Angular JS

Ich versuche, meine App nach dem Ausführen von Grunt Build anzuzeigen. Ich benutze grunt serv: dist, um alle produktionsbereiten Builds zu sehen, aber im Browser bekomme ich eine Endlosschleife, die besagt:

WARNUNG: Es wurde versucht, den Winkel mehrmals zu laden. 

Ich habe das gelesen, weil die TemplateURL: nach Verkettung falsch sein kann. Wie in diesem Beitrag: Versuchte, mehr als einmal Winkel zu laden

Aber wie kann ich das beheben? Hier ist meine 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: '/'
      });
  }]);
44
Vishal Sakaria

In meinem Fall war dies auf den folgenden HTML-Code zurückzuführen:

<!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>

Wie Sie sehen, ist der <main> nicht geschlossen. Dies führte zu meiner Variante von 'WARNUNG: Versuchte Winkel mehr als einmal zu laden.' Problem.

38
jhohlfeld

Dieses Problem wird auch dadurch verursacht, dass die aktuelle Seite als templateUrl verwendet wird. Dies ist besonders problematisch, da es zu einer unendlichen Schleife kommt, die sich immer wieder selbst referenziert.

Wenn Sie eine Endlosschleife erhalten, die Ihre Seite zum Absturz bringt, ist dies wahrscheinlich die folgende. Wenn Sie CORS-Fehler erhalten, liegt dies wahrscheinlich daran, dass Sie ein Skript-Tag aus einer anderen Domäne in Ihre Vorlage aufnehmen.

$routeProvider.when('/', {
   templateUrl: 'an/absolute/url/to/the/current/page.html'
});
31
Man Personson

Ich hatte dieses Problem, weil mein templateUrl-Pfad falsch war, da sich index.html in einer anderen Stammstruktur befand. Testen Sie den URL-Pfad einfach mit template anstelle von templateUrl

Legen Sie ein Bild in Ihren views-Ordner und versuchen Sie es.

$routeProvider.when('/', {
   template: 'Test Template <img src="views/pic.jpg"/>',
   controller: 'PostsCtrl'
});

$routeProvider.otherwise({ redirectTo: '/' });

Sie sollten "Test Template" sehen und das Bild wird auf Ihrer Indexseite angezeigt. Wenn das Bild nicht angezeigt wird, ist der Pfad falsch.

12
Blake Bowen

Ich bin auf das gleiche Problem gestoßen. In meinem Fall wurden mit Webpack Build jedoch zwei verschiedene Angular-Versionen (Angular 1.5.5 und Angular 1.5.0) gepackt. 

6
fernando

Ja, ich habe das Problem gelöst, indem ich die post.html in partials verschoben und die templateUrl in partials/posts.html geändert habe. Ich denke, das liegt vielleicht an dem Yo-Gerüst, das ich verwendet habe, das eckig ist, weil es gut funktioniert. Danke trotzdem 

3
Vishal Sakaria

Ich bestätige alle oben genannten Punkte (normalerweise Fehler beim Routing oder Fehler in den Ressourcenpfaden oder ng-app-Fehler).

Ich möchte nur einen Punkt hinzufügen, um den Fehler zu finden (nicht bei falscher NG-App).

Wenn wir annehmen, dass der Server für "angle" wie folgt festgelegt ist:

  • / static/* für alle statischen Ressourcen (js, css, png ...) 
  • / api/* rest api
  • / * Alle anderen Anrufe werden an index.html weitergeleitet

Auf diese Weise gibt jeder falsche Pfad index.html anstelle von png-, css-, js- und tpl-Dateien zurück, selbst wenn/static/path fehlt oder der Fehler 404 aufgrund fehlender statischer Ressourcen fehlt.

kurz: prüfe den Anmeldeserver, mit welchen Pfaden du die Seite öffnest , dort könnte der Fehler gefunden werden.

2
Lattanzio

Das Problem hängt tatsächlich damit zusammen, dass die Winkelbibliothek zu oft geladen wird.

Meine Antwort kann zu offensichtlich sein, aber der Code selbst ist in Ordnung und es gibt nicht viele Informationen darüber, was das Problem sein kann. Wenn Sie Ihren Ordnerbaum veröffentlichen können, kann dies möglicherweise nützlich sein.

Stellen Sie in der Zwischenzeit sicher, dass diese beiden Dinge in Ordnung sind, bevor Sie weitere Untersuchungen durchführen:

  • views/posts.html enthält kein Skript-Tag mit dem Aufruf der angle.js-Bibliothek.
  • die Datei views/posts.html ist an dieser Position verfügbar (verwenden Sie möglicherweise einen vollständigen URI).
2
Francesco

Sie müssen die Winkelroute "/" ändern! Es ist ein Problem, weil '/' Basis-URL-Anforderung. Wenn Sie '/' => '/ home' oder '/ hede' ändern, wird der Winkel gut funktionieren.

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' });
    }]);
2
Salih KARAHAN

Ich habe kürzlich diesen Fehler erhalten und so habe ich das Problem gelöst. Ich wollte in die Web.config gehen und <compilation debug="false" targetFramework="4.5.2"/>in <compilation debug="true" ... />____ ändern. Prost!

1
DDelgro

In meinem Fall war die Ursache der Warnung ein redundantes Einfügen von "angle-szenario.js" nach "angle.js". 

Wenn ich die "angle-szenario.js" entfernte, verschwand die Warnung.

1
hellowstone

Wir haben versehentlich versucht, eine nicht vorhandene Route in einem ui-view zu laden. Die Route entsprach jedoch einer gültigen URL, die eine Angular-App enthielt. Stattdessen wurde diese Angular-App in den ui-view geladen, daher die mehrfachen Kopien von Angular.

0
Westy92

In diesem Fall braucht der Code irgendwie eine Endlosschleife. Vergewissern Sie sich, dass in Ihrem Code Umleitungen vorhanden sind, die mehrfach aufgerufen werden.

0
Kurkula

In meinem Fall war die Vorlagendatei (keine Zeichenfolge) leer. Wenn ich die Vorlagendatei mit einfacher HTML-Datei befüllte, wurde das Problem behoben. Füllen Sie views/posts.html mit etwas Code.

0

In meinem Fall wird die Winkelbibliothek und mein Winkelmodulcode dynamisch in eine andere Anwendung geladen, über die ich keine Kontrolle habe. Und diese werden auf Knopfdruck geladen. Zum ersten Mal funktioniert es gut, aber wenn der Benutzer zum zweiten Mal klickt, werden die Bibliothek und andere Dateien erneut geladen und es wird eine Warnung angezeigt.

WARNUNG: Es wurde versucht, den Winkel mehrmals zu laden.

var isInitialized = element.injector();
if (!isInitialized) {
  angular.bootstrap(angular.element(document.getElementById('#mainDiv')), ['defaultApp']);
}
0
Aniruddha Das

Ich bin auf dieses Problem gestoßen und habe festgestellt, dass das Problem in meiner Datei karma.conf.js aufgetreten ist.

Beim Festlegen, welche Dateimuster in den Browser geladen werden sollen, habe ich eine Platzhalter-ID verwendet, um AngularJS wie folgt zu laden:

'path_to_angular/angular/*.js

Wenn sich in diesem Verzeichnis mehr als eine Datei befindet, die AngularJS lädt, z. B. angle.js und angular.min.js, wird dieser Fehler ausgegeben.

Um diesen Fehler zu vermeiden, geben Sie einfach einen einzelnen Pfad ohne Platzhalter an.

'path_to_angular/angular/angular.js'

oder

'path_to_angular/angular/angular.min.js'

sollte den Trick machen.

0
JC4NT

In meinem Fall fehlte app-view-segment="1" und in der Datei index.cshtml gab es in den @Scripts.Render-Zeilen zwei Verweise auf denselben Ordner von angle. Danke, dass Sie auf die Winkelführung hingewiesen haben. 

0
Umpa

Beim letzten Mal war mir dies passiert, es war ein führendes "/" in der templateUrl einer Route, das nicht angenommen werden sollte.

Diesmal waren es jedoch einige Ansichten, die nach dem Build nicht in den Vorlagencache gerendert wurden, da diese Ansichten in einem Unterordner eines Unterordners unter dem Ordner "Ansichten" abgelegt wurden. Gruntfile.js war nicht darauf eingestellt, Ordner der dritten Ebene von '/ views' abzurufen.

Um herauszufinden, was in einem yo-grunt-Build gerendert wurde, können Sie nach dem Abschluss des Builds die Datei .tmp/templateCache.js betrachten.

Ich wünsche mir, dass das Team von AngularJS LTS einen Weg finden wird, um diese Art von Fehlern besser zu handhaben, mit etwas besseren Hinweisen, wo das Problem liegt.

Hoffe das hilft!

0
Ady Rosen

Nur um ein weiteres mögliches Szenario zu diesem Problem hinzuzufügen ...

Verhalten : Alles funktioniert einwandfrei, wenn Sie von der Stamm-URL geladen werden. Dieses Problem tritt jedoch auf, wenn Sie Ihre Seite von einer anderen Route laden (oder eine andere Route eingeben).

Wahrscheinlicher Grund : Eine Ihrer verschachtelten Komponenten oder Seiten lädt etwas aus einem relativen - Pfad anstelle eines absoluten - Pfads.

In meinem Fall hatte es mit einer referenzierten Komponente zu tun, bei der die Vorlage mit einem relativen Pfad geladen wurde.

So zum Beispiel von hier aus ändern:

angular.
  module('app').
  component('profileSelect', {
    // this line was the problem
    templateUrl: 'static/angular/profiles/profile-select.html',
    bindings: {}
  });

zu diesem:

angular.
  module('app').
  component('profileSelect', {
    // making this an absolute path fixes it
    templateUrl: '/static/angular/profiles/profile-select.html',
    bindings: {}
  });

Gelöst Grundsätzlich funktionieren diese relativen Verweise nicht mehr, da Sie jetzt über Unterpfade verfügen, und Winkel entscheidet, auf diese unglaublich schwer zu entschlüsselnde Weise zu scheitern.

Hoffentlich hilft jemand dieser Antwort. Ich habe gerade eine Stunde meines Lebens daran verloren ...

0
Cory

Ihre Lösung kann beispielsweise lokal funktionieren, wenn Ihr laufender Grunt-Server dient. Wenn Sie jedoch einen grunt-Build ausführen, ist Ihre Ansicht möglicherweise nicht im Verzeichnis dist enthalten. Wenn Sie beispielsweise über eine Ansicht verfügen, die sich in Ansichten> Vorlagen>modulesbefindet, werden mehr alszwei Ebenenhinzugefügt, wenn Sie standardmäßig grunt build ausführen. Zumindest war das für mich der Fall. Prüfen Sie, ob Ihre HTML-Datei in das dist-Verzeichnis der Ansichten aufgenommen wird. Wenn Ihre Dateien nicht manuell hinzugefügt werden, um zu überprüfen, ob sie funktionieren, aktualisieren Sie Ihre grunt-Datei entsprechend.

0
Galactic Ranger

In meinem Fall war das Problem auf AngularJS Batarang Chrome Extension (Version 0.7.1) zurückzuführen. Nachdem ich die Erweiterung deaktiviert hatte, verschwand der Fehler.

0
Borivojević