Tentou carregar o Angular mais de uma vez

Eu tenho um aplicativo scaffolded yeoman (o gerador fullstack angular).

grunt serve funciona bem, mas grunt build produz uma distribuição que bloqueia a memory, muito provavelmente por causa de referências circulares em angular.

Eu atualizei angular para 1.2.15 . O erro que recebo é:

WARNING: Tried to Load Angular More Than Once

Antes da atualização, o erro foi:

Error: 10 $digest() iterations reached. Aborting!

É muito difícil depurar, pois isso só acontece após a compilation / minimização. Todos os meus módulos estão no formato de matriz angular, então a minificação DI não deve ser um problema, mas é.

Não há script único que cause isso. A única maneira de ir embora é se eu não inicializar com o arquivo app.js. Meu arquivo app.js está abaixo.

Alguma coisa vem à mente?

 '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'); 

Isso pode ser um número de problemas: essencialmente, é um problema de routeProvider não encontrar um arquivo e carregar recursivamente o padrão.

Para mim, descobriu-se que não era a minimização, mas a concatenação dos js que causavam os problemas.

 angular.module('myApp').config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/listing.html', controller: 'ListingCtrl' }) .otherwise({ redirectTo: '/' }); }]).constant('FIREBASE_URL', 'something'); 

Você notará que, se o aplicativo não conseguir encontrar um arquivo (ou seja, otherwise ), ele redirectá para a raiz, que neste caso carrega o templateUrl . Mas se seu templateUrl estiver errado, ele causará uma recursion que recarregará index.html carregando angular (e todo o resto) repetidas vezes.

No meu caso, o grunt-concat causou o templateUrl errado após a compilation, mas não antes.

Eu me deparei com esse problema quando esqueci de include o ‘.html’ para visualizações.

Exemplo:

 templateUrl: 'views/home' 

Deveria estar:

 templateUrl: 'views/home.html' 

Parece que ninguém mencionou isso em nenhum lugar, então aqui está o que desencadeou isso para mim: eu tinha a diretiva de visualização no meu corpo. Mudando assim

  
...

parou o erro.

Isso não tem nada a ver com o app.js Em vez disso, esse aviso é registrado quando você inclui a biblioteca Angular JS mais de uma vez.

Eu consegui reproduzir o erro neste JSBin . Observe as duas tags de script (duas versões diferentes):

   

Código Angular Relevante no GitHub .

Eu tive o mesmo problema, o problema foi o conflito entre JQuery e Angular. Angular não pôde definir a biblioteca completa do JQuery para si. Como o JQLite é suficiente na maioria dos casos, incluí o Angular primeiro na minha página da Web e depois carreguei o Jquery. O erro foi embora então.

No meu caso eu estava recebendo esse erro ao usar jquery, bem como js angular na página.

    

Eu removi:

  

E o aviso desapareceu.

Teve esse problema hoje e percebi que eu iria postar como eu corrigi-lo. No meu caso, eu tinha uma página index.html com:

   

e no meu arquivo app.js eu tinha o seguinte código:

 $routeProvider.when('/', { controller : 'mainController', templateUrl : 'index.html', title : 'Home' }).when('/other', { controller : 'otherController', templateUrl : 'views/other.html', title : 'other' }).otherwise({ redirectTo : '/' }); 

Como resultado, quando eu fui para a página (base_url /) ele carregou index.html, e dentro do ng-view ele carregou index.html novamente, e dentro dessa visão ele carregou index.html novamente .. e assim por diante – criando uma carga recursiva infinita de index.html (cada vez carregando bibliotecas angulares).

Para resolver tudo o que eu tinha que fazer era remover index.html do routProvider – como segue:

 $routeProvider.when('/other', { controller : 'otherController', templateUrl : 'views/other.html', title : 'other' }).otherwise({ redirectTo : '/' }); 

Eu também estava enfrentando tal problema, onde eu estava continuamente obtendo um loop infinito e a página estava se recarregando infinitamente. Depois de um pouco de debugging descobri que o erro estava sendo causado porque, angular não foi capaz de carregar o modelo dado com um id específico porque o modelo não estava presente nesse arquivo.

Tenha cuidado com o URL que você fornece em aplicativos angulares. Se não estiver correto, angular pode continuar a procurá-lo eventualmente, levando a loop infinito!

Espero que isto ajude!

Eu tive um problema semelhante, e para mim o problema foi devido a alguns pontos e vírgulas ausentes no controlador. A minificação do aplicativo provavelmente estava fazendo com que o código fosse executado incorretamente (muito provavelmente, o código resultante estava causando mutações de estado, o que faz com que a exibição seja renderizada e, em seguida, o controlador executa o código novamente, e assim recursivamente).

Eu tive esse problema no código caneta, e acontece que é só porque eu estava carregando o JQuery antes do Angular. Não sei se isso pode se aplicar a outros casos.

A capitalização também é importante! Dentro da minha diretiva, eu tentei especificar:

 templateUrl: 'Views/mytemplate' 

e recebi o aviso “mais de uma vez”. O aviso desapareceu quando eu mudei para:

 templateUrl: 'views/mytemplate' 

Corrija-me, mas acho que isso aconteceu porque a página na qual coloquei a diretiva estava em “visualizações” e não “Visualizações” na function de configuração da rota.

Isso aconteceu comigo também com o .NET e MVC 5 e depois de um tempo eu percebi que dentro do label no arquivo Index.cshtml:

 

novamente incluído como scripts de seção acontece com você. Para resolver o problema no lado do servidor, o que eu faço é retornar a visão parcial. Algo como:

 public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult Login() { return PartialView(); } public ActionResult About() { return PartialView(); } } 

Eu tive esse mesmo problema (“Tentei carregar Angular mais de uma vez”) porque eu tinha incluído duas vezes o arquivo angularJs (sem perceber) no meu index.html.

  

Você deve mudar a rota angular ‘/’! É um problema porque o pedido de URL de base é ‘/’. Se você alterar ‘/’ => ‘/ home’ ou ‘/ hede’ angular terá um bom trabalho.

Eu estava tendo exatamente o mesmo erro. Depois de algumas horas, notei que havia uma vírgula extra no meu arquivo .JSON, no último par de valores-chave.

 //doesn't work { "key":"value", "key":"value", "key":"value", } 

Então eu tirei (o último ‘,’) e resolvi o problema.

 //works { "key":"value", "key":"value", "key":"value" } 

Para qualquer um que tenha esse problema no futuro, para mim isso foi causado por uma function de seta em vez de um literal de function em um bloco de run :

 // bad module('a').run(() => ...) // good module('a').run(function() {...}) 

No meu caso, eu tenho index.html que incorpora 2 views, ou seja, view1.html e view2.html. Eu desenvolvi essas duas visualizações independentes de index.html e tentei incorporar usando rota. Então, eu tinha todos os arquivos de script definidos nos 2 arquivos de exibição em HTML que estavam causando esse aviso. O aviso desapareceu após remover a inclusão de arquivos de script angularJS das visualizações.

Em suma, os arquivos de script angularJS, jQuery e angular-route.js devem ser incluídos apenas em index.html e não em arquivos html de visualização.

Outro caso é o Webpack que concatia angular no bundle.js, ao lado do angular carregado da tag index.html .

isso foi porque usamos a importação explícita de angular em muitos arquivos:

 define(['angular', ...], function(angular, ...){ 

então, o webpack decidiu empacotá-lo também. limpando todos em:

 define([...], function(...){ 

Estava Tried to Load Angular More Than Once consertar Tried to Load Angular More Than Once por uma Tried to Load Angular More Than Once por todas.

Meu problema era a seguinte linha (HAML):

 %a{"href"=>"#", "ng-click" => "showConfirmDeleteModal()"} Delete 

Note que eu tenho um ng-click angular e eu tenho uma tag href que vai pular para # que é a mesma página. Eu só tive que remover a tag href e eu estava pronto para ir.

Eu tenho o mesmo problema, porque eu tenho angular duas vezes em index.html :

   

Observe que o aviso surge somente quando o modo html5 é verdadeiro, quando meu modo html5 era falso, não vi esse aviso.

Então, remover o primeiro angular.js resolve o problema.

O problema para mim era que eu tinha feito backup do arquivo controller (js) com algumas outras mudanças na mesma pasta e o bundling carregava ambos os arquivos do controller (original e backup js). Removendo o backup da pasta de scripts, que foi empacotado resolveu o problema.