ПРЕДУПРЕЖДЕНИЕ. Пыталось загрузить angular более одного раза. angular JS

Я пытаюсь просмотреть мое приложение после запуска Grunt Build. Я использую grunt serve: dist, чтобы увидеть все готовые сборки, но в браузере я получаю бесконечный цикл:

ПРЕДУПРЕЖДЕНИЕ. Пыталось загрузить angular более одного раза.

Я прочитал это, потому что TemplateURL: может быть неправильным после конкатенации. Как и в этом посте: Пытался загрузить angular Больше, чем один раз

Но как я могу это исправить? Вот мой 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: '/'
      });
  }]);

Ответы

Ответ 1

В моем случае это произошло из-за следующего HTML-кода:

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

Как вы можете видеть, <main> не закрыт. Это привело к моему варианту "ПРЕДУПРЕЖДЕНИЕ: Пыталось загрузить angular более одного раза". проблема.

Ответ 2

Эта проблема также вызвана использованием текущей страницы как templateUrl. Это особенно проблематично, поскольку это приводит к тому, что бесконечный цикл ссылается на себя снова и снова.

Если вы получаете бесконечный цикл, который разбивает вашу страницу, возможно, это так. Если вы получаете ошибки CORS, возможно, из-за включения тега script из другого домена в ваш шаблон.

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

Ответ 3

У меня была эта проблема, потому что мой путь templateUrl был неправильным из-за того, что мой index.html находился в другой корневой структуре. Попробуйте протестировать URL-адрес только с помощью template вместо templateUrl.

Поместите изображение в папку views и попробуйте это.

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

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

Вы должны увидеть "тестовый шаблон", и изображение появится на вашей индексной странице. Если изображение не отображается, ваш путь неправильный.

Ответ 4

Я столкнулся с той же проблемой. Но в моем случае, при создании webpack, две разные версии Angular были упакованы (Angular 1.5.5 и Angular 1.5.0).

Ответ 5

Да, я разобрал это, переместив post.html в частичные и изменив templateUrl на partials/posts.html. Я думаю, что это может быть из-за того, что я использовал эшафот, который был angular fullstack, потому что он отлично работает в проекте see. Спасибо в любом случае

Ответ 6

Проблема на самом деле связана с загрузкой библиотеки angular слишком много раз.

Мой ответ звучит слишком очевиден, но сам код в порядке, и не так много информации о том, что может быть проблемой. Если вы можете опубликовать дерево папок, возможно, это может быть полезно.

Тем временем, пожалуйста, убедитесь, что эти две вещи в порядке, прежде чем расследовать следующее:

  • views/posts.html не включает тег script с вызовом библиотеки angular.js.
  • views/posts.html файл доступен в этой позиции (возможно, используйте полный URI).

Ответ 7

Я подтверждаю все вышеизложенное (обычно ошибки маршрутизации или некоторая ошибка в пути ресурсов или ошибка ng-app).

Я хотел бы добавить только точку, которая поможет найти ошибку (не в случае неправильного ng-приложения).

Если мы предположим, что сервер для angular установлен следующим образом:

  • /static/* для всех статических ресурсов (js, css, png...)
  • /api/* rest api
  • /* все остальные вызовы будут перенаправлены на index.html

Таким образом, весь неправильный путь вернет index.html вместо png, css, js и tpl файлов, даже если отсутствует /static/path или miss, чтобы вернуть 404 для отсутствия статических ресурсов.

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

Ответ 8

Вы должны изменить angular route '/'! Это проблема, потому что запрос '/' базового url. Если вы измените '/' = > '/home' или '/hede' angular, то получится хорошая работа. Пример:

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

Ответ 9

В моем случае причиной предупреждения было избыточное включение script "angular -scenario.js" после "angular.js".

Когда я удалил предупреждение "angular -scenario.js", исчезло.

Ответ 10

Недавно я получил эту ошибку и, как я решил, нужно было войти в Web.config и изменить <compilation debug="false" targetFramework="4.5.2"/> до <compilation debug="true" ... /> Я надеюсь, что это помогает кому-то! Ура!

Ответ 11

Ваше решение может работать локально, например, если работает ваш хрюканье, но когда вы запускаете сборку grunt, ваше представление может не включаться в каталог dist. Например, если у вас есть представление, и это представление находится в представлениях > шаблоны > модули, то не более, чем два уровня не будет добавлено при запуске сборки grunt по умолчанию. По крайней мере, это было для меня. Проверьте, включен ли ваш html файл в каталог dist в представлениях. Если он не добавляет ваши файлы вручную, чтобы убедиться, что он работает, обновите файл grunt.

Ответ 12

В моем случае проблема была связана с AngularJS Batarang Chrome Extension (версия 0.7.1). Как только я отключил расширение, ошибка исчезла.

Ответ 13

В моем случае библиотека angular и мой код модуля angular динамически загружаются внутри другого приложения, которое у меня нет. И они загружаются одним нажатием кнопки. Впервые его работа отлично, но когда пользователь щелкает второй раз, библиотека и другие файлы загружаются снова, и это дает мне предупреждение.

ПРЕДУПРЕЖДЕНИЕ. Пыталось загрузить angular более одного раза.

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

Ответ 14

Этот случай - это когда код каким-то образом переходит в бесконечный цикл. Убедитесь, что вы проверяете, есть ли какие-либо переадресации в вашем коде, которые вызывают несколько раз.

Ответ 15

В моем случае файл шаблона (не строка) был пустым. когда я заполнил файл шаблона простым html, проблема была решена. Заполните views/posts.html некоторым кодом.

Ответ 16

Мы случайно пытались загрузить несуществующий маршрут в ui-view. Маршрут, однако, соответствовал допустимому URL-адресу, содержащему приложение Angular. Вместо этого он загрузил это приложение Angular в ui-view, следовательно, несколько копий Angular.

Ответ 17

В моем случае app-view-segment="1" отсутствовал, и в файле index.cshtml в строке @Scripts.Render было указано две ссылки, указывающие на ту же папку angular в файле index.cshtml. Спасибо за указание на маршрутизацию angular.

Ответ 18

Просто чтобы добавить еще один возможный сценарий к этой проблеме...

Поведение: все отлично работает при загрузке с корневого URL, но вы сталкиваетесь с этой проблемой при загрузке страницы с любого другого маршрута (или при вводе другого маршрута).

Вероятная причина: один из ваших вложенных компонентов или страниц загружает что-то по относительному пути, а не по абсолютному пути.

В моем случае это было связано со ссылочным компонентом, загружающим свой шаблон с относительным путем.

Так, например, меняется от этого:

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

к этому:

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

Разрешил это. В основном потому, что теперь у вас есть подпути, эти относительные ссылки больше не работают, и angular решает потерпеть неудачу таким невероятно трудным для расшифровки способом.

Надеюсь, кому-то поможет этот ответ. Я только что потерял hour+ своей жизни из-за этого...

Ответ 19

В прошлый раз, когда это случилось со мной, это был ведущий '/' в шаблоне маршрута UU, которого не должно было быть.

На этот раз, однако, это было несколько представлений, которые не отображались в кэше шаблонов после сборки, потому что я поместил эти представления в подпапку подпапки в папке представлений. Gruntfile.js не был настроен на выбор папок 3-го уровня из "/views".

Чтобы узнать, что было отрисовано в сборке yo-grunt, вы можете посмотреть файл .tmp/templateCache.js после его завершения.

Мне бы очень хотелось, чтобы команда AngularJS LTS нашла способ лучше справиться с такого рода ошибками, а также лучше понять, в чем проблема.

Надеюсь это поможет!

Ответ 20

Я столкнулся с этой проблемой и обнаружил, что проблема возникла в моем файле karma.conf.js.

При указании шаблонов файлов для загрузки в браузер, я использовал подстановочный идентификатор для загрузки AngularJS следующим образом:

'path_to_angular/angular/*.js

Если в этот каталог загружается более одного файла AngularJS, например, angular.js и angular.min.js, эта ошибка будет выдана.

Чтобы избежать этой ошибки, просто укажите один путь без подстановочных знаков.

'path_to_angular/angular/angular.js'

или же

'path_to_angular/angular/angular.min.js'

должен сделать свое дело.

Ответ 21

Проблема/исправление, которые у нас были, могут быть немного уникальными, потому что мы используем webpack + AngularJS.

Мы используем html-webpack-plugin. Однако наш файл index.html также имел

<script type="text/javascript" src="./bundle.js"></script>

html-webpack-plugin автоматически добавляет эту строку, поэтому она была в нашем результирующем HTML дважды.

Ответ 22

Я столкнулся с той же проблемой и почему я приземлился здесь. Однако ни один из ответов не работал у меня. Оказывается, в коде нет ничего плохого, и URL-адрес браузера является виновником: он должен быть localhost:3000/#/, но почему-то я получил что-то вроде localhost:3000/xxx/public/index.html/#/ в своем браузере. Кстати, я использую ui-router с node.js в WebStorm, если это имеет значение.

Ответ 23

В моем случае это была недопустимая ссылка ресурса в index.html

<link rel="import" href="/somethingmissing.html">