Спробував завантажити Angular більше одного разу

Question 1

У мене є додаток для будівельних лісів (кутовий генератор повних стеків).

grunt serveчудово працює, але grunt buildвидає розподіл, який блокує пам'ять, швидше за все, через кругові посилання в angular.

Я модернізував кутовий до 1.2.15. Я отримую помилку:

WARNING: Tried to Load Angular More Than Once

До оновлення помилка була такою:

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

Налагодити досить складно, оскільки це відбувається лише після складання / мініфікації. Усі мої модулі мають формат масиву angular, тому мініфікація DI не повинна становити проблему, але це так.

Немає єдиного сценарію, який би спричинив це. Єдиний спосіб зникнення - це якщо я не ініціалізую за допомогою файлу app.js. Мій файл app.js знаходиться нижче.

Що-небудь спадає вам на думку?

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

Question 2

Це може бути низкою проблем: по суті, це проблема маршрутного постачальника, який не знаходить файл і рекурсивно завантажує за замовчуванням.

Для мене виявилося, що проблеми спричинила не мініфікація, а об’єднання js.

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

Ви помітите, що якщо програма не може знайти файл (тобто, otherwise), вона переспрямовуватиме до кореня, який у цьому випадку завантажує templateUrl. Але якщо ви templateUrlпомиляєтесь, це призведе до рекурсії, яка index.htmlзнову і знову перезавантажує завантаження angular (і все інше).

У моєму випадку grunt-concat спричинив помилку templateUrl після побудови, але не раніше.

Question 3

Проблема може виникнути, коли $ templateCacheProvider намагається вирішити шаблон у шаблоні templateCache або у каталозі вашого проекту, який не існує

Приклад:

templateUrl: 'views/wrongPathToTemplate'

Має бути:

templateUrl: 'views/home.html'

Question 4

Це взагалі не має нічого спільного app.js. Натомість це попередження реєструється, коли ви більше одного разу включаєте бібліотеку Angular JS.

Мені вдалося відтворити помилку в цьому JSBin . Зверніть увагу на два теги сценарію (дві різні версії):

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

Відповідний Angular код на GitHub .

Question 5

Здається, про це ніхто ніде не згадував, тому ось що у мене це викликало: у мене на тілі була директива ng-view. Змінюючи це так

<body layout="column">
<div ng-view></div>
...
</body>

зупинив помилку.

Question 6

Я також стикався з такою проблемою, коли я постійно отримував нескінченний цикл, і сторінка нескінченно перезавантажувалась. Після невеликої налагодження я виявив, що помилка спричинена тим, що angular не зміг завантажити шаблон із заданим ідентифікатором, оскільки шаблон відсутній у цьому файлі.

Будьте обережні з URL-адресами, які ви надаєте в кутових програмах. Якщо це неправильно, angular може просто продовжувати шукати його, що призведе до нескінченної петлі!

Сподіваюся, це допомагає!

Question 7

У мене була та сама проблема, проблема полягала в конфлікті між JQuery та Angular. Angular не зміг встановити для себе повну бібліотеку JQuery. Оскільки JQLite досить у більшості випадків, я спочатку включив Angular на свою веб-сторінку, а потім завантажив Jquery. Тоді помилки не було.

Question 8

У моєму випадку я отримував цю помилку під час використання jquery, а також angular js на сторінці.

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

Я видалив:

<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

І попередження зникло.

Question 9

Якби ця проблема була сьогодні, і я придумав, що я опублікую, як я її виправив. У моєму випадку у мене була сторінка index.html із:

<body ng-app="myApp" ng-controller="mainController"
   <div ng-view></div>
</body>

і у моєму файлі app.js у мене був такий код:

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

В результаті, коли я зайшов на сторінку (base_url /), він завантажив index.html, а всередину ng-view знову завантажив index.html, а всередині цього перегляду знову завантажив index.html .. і так далі - створення нескінченне рекурсивне навантаження index.html (при кожному завантаженні кутових бібліотек).

Щоб вирішити все, що мені потрібно було видалити index.html із routeProvider - наступним чином:

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

Question 10

У мене була подібна проблема, і для мене проблема була пов’язана з деякими відсутніми крапками з комою в контролері. Мініфікація програми, ймовірно, спричиняла неправильне виконання коду (швидше за все, результуючий код спричиняв мутації стану, що спричиняло рендерінг подання, а потім контролер виконував код знову і так далі рекурсивно).

Question 11

У мене була ця проблема з кодовою ручкою, і виявилося, це тому, що я завантажував JQuery до Angular. Не знаю, чи може це стосуватися інших випадків.

Question 12

Важливим є також використання великих літер! Всередині моєї директиви я спробував вказати:

templateUrl: 'Views/mytemplate'

і отримав попередження "не раз". Попередження зникло, коли я змінив його на:

templateUrl: 'views/mytemplate'

Виправте мене, але я думаю, що це сталося, тому що сторінка, на якій я розмістив директиву, знаходилась у розділі "views", а не "Views" у функції конфігурації маршруту.

Question 13

Це трапилося зі мною також із .NET та MVC 5, і через деякий час я зрозумів, що всередині мітки у файлі Index.cshtml:

<div data-ng-view=""></div>

знову включений як сценарії розділів трапляються з вами. Для вирішення проблеми на стороні сервера я роблю повернення часткового подання. Щось на зразок:

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

    public ActionResult Login()
    {
        return PartialView();
    }

    public ActionResult About()
    {
        return PartialView();
    }
}

Question 14

У мене була та сама проблема ("Спроби завантажити Angular більше одного разу"), тому що я двічі включив файл angularJs (без сприйняття) до мого index.html.

<script src="angular.js">
<script src="angular.min.js">

Question 15

У мене така сама проблема, тому що я angularдва рази 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>

Зауважте, що попередження виникає лише тоді, коли html5режим істинний, коли мій html5режим був помилковим, я не бачив цього попередження.

Отже, видалення першого angular.jsвирішує проблему.

Question 16

Ви повинні змінити кутовий маршрут '/'! Це проблема, оскільки запит базової URL-адреси '/'. Якщо ви зміните '/' => '/ home' або '/ hede' angular, це буде добре працювати.

Question 17

Для кожного, хто матиме цю проблему в майбутньому, для мене це було викликано функцією стрілки замість літералу функції в runблоці:

// bad
module('a').run(() => ...)

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

Question 18

У моєму випадку у мене є index.html, який вбудовує 2 подання, тобто view1.html і view2.html. Я розробив ці 2 подання незалежно від index.html, а потім спробував вставити за допомогою route. Тож у мене були визначені всі файли скриптів у файлах html 2 view, що викликало це попередження. Попередження зникло після видалення включення файлів сценарію angularJS із подань.

Коротше кажучи, файли скриптів angularJS, jQuery та angular-route.js повинні бути включені лише до index.html, а не до HTML-файлів перегляду.

Question 19

Інший випадок - Webpackце прив’язка angular до bundle.js, крім angular, який завантажується з <script>тегу index.html .

це було тому, що ми використовували явний імпорт angularу багатьох файлах:

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

отже, webpack вирішив його також зв’язати. очищення всіх з них у:

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

виправляв Tried to Load Angular More Than Onceраз і назавжди.

Question 20

Моєю проблемою був такий рядок (HAML):

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

Зверніть увагу, що у мене кутовий, ng-clickі у мене є hrefтег, який перейде на #ту саму сторінку. Мені просто довелося зняти hrefмітку, і мені було добре піти.

Question 21

Проблема для мене полягала в тому, що я взяв резервну копію файлу контролера (js) з деякими іншими змінами в тій же папці, і в комплекті завантажилися обидва файли контролера (оригінальний та резервний js). Видалення резервної копії з папки сценаріїв, яка була в комплекті, вирішило проблему.

Question 22

У мене була ця проблема, коли в html не вистачало закриваючого тегу .

Отже, замість:

<table></table>

.. мій HTML був

<table>...<table>

Спробував завантажити jQuery після angular, як зазначено вище. Це запобігло появі повідомлення про помилку, але насправді не вирішило проблему. А jQuery '.find' згодом насправді не працював ..

Рішенням було виправлення відсутнього закриваючого тегу.

Question 23

У мене була точно така ж помилка. Через кілька годин я помітив, що у моєму файлі .JSON була остання кома на останній парі ключ-значення.

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

Потім я просто зняв (останнє ','), і це вирішило проблему.

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