Angular를 두 번 이상로드하려고했습니다.
나는 yeoman scaffolded app (angular fullstack generator)을 가지고 있습니다.
grunt serve잘 작동하지만 grunt build, 아마도 각도의 순환 참조로 인해 메모리를 잠그는 분포를 생성합니다.
각도를 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');
이것은 여러 문제 일 수 있습니다. 본질적으로 routeProvider가 파일을 찾지 못하고 기본값을 재귀 적으로로드하는 문제입니다.
나에게 문제를 일으킨 것은 축소가 아니라 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로딩 각도 (및 다른 모든 것)를 반복해서 다시 로드 하는 재귀가 발생할 것입니다 .
제 경우에는 grunt-concat으로 인해 빌드 후 templateUrl이 잘못되었지만 이전에는 잘못되었습니다.
$ templateCacheProvider가 templateCache에서 또는 존재하지 않는 프로젝트 디렉터리를 통해 템플릿을 확인하려고 할 때 문제가 발생할 수 있습니다.
예:
templateUrl: 'views/wrongPathToTemplate'
해야한다:
templateUrl: 'views/home.html'
아무도 이것을 어디에도 언급하지 않은 것 같으므로 여기에 나를 위해 그것을 유발 한 것이 있습니다. 내 몸에 ng-view 지시문이 있습니다. 그렇게 바꾸어
<body layout="column">
<div ng-view></div>
...
</body>
오류를 중지했습니다.
이것은 전혀 관련이 없습니다 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>
GitHub의 관련 Angular 코드 .
나는 같은 문제가 있었는데, 문제는 JQuery와 Angular 간의 충돌이었습니다. Angular는 전체 JQuery 라이브러리를 자체적으로 설정할 수 없습니다. 대부분의 경우 JQLite로 충분하기 때문에 웹 페이지에 Angular를 먼저 포함시킨 다음 Jquery를로드했습니다. 그러면 오류가 사라졌습니다.
제 경우에는 페이지에서 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>
그리고 경고가 사라졌습니다.
또한 계속해서 무한 루프가 발생하고 페이지가 무한대로 다시로드되는 문제에 직면했습니다. 약간의 디버깅 후 나는 앵귤러가 해당 파일에 템플릿이 없기 때문에 특정 ID로 주어진 템플릿을로드 할 수 없기 때문에 오류가 발생했음을 알았습니다 .
각도 앱에서 제공하는 URL에주의하십시오. 정확하지 않은 경우 angular는 결국 계속해서 찾을 수 있으며 무한 루프로 이어집니다!
도움이 되었기를 바랍니다!
오늘이 문제가 있었고 어떻게 수정했는지 게시 할 것이라고 생각했습니다. 제 경우에는 다음과 같은 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 : '/'
});
As a result, when I went to the page (base_url/) it loaded index.html, and inside the ng-view it loaded index.html again, and inside that view it loaded index.html again.. and so on - creating an infinite recursive load of index.html (each time loading angular libraries).
To resolve all I had to do was remove index.html from the routProvider - as follows:
$routeProvider.when('/other', {
controller : 'otherController',
templateUrl : 'views/other.html',
title : 'other'
}).otherwise({
redirectTo : '/'
});
I had a similar issue, and for me the issue was due to some missing semicolons in the controller. The minification of the app was probably causing the code to execute incorrectly (most likely the resulting code was causing state mutations, which causes the view to render, and then the controller executes the code again, and so on recursively).
I had that problem on code pen, and it turn out it's just because I was loading JQuery before Angular. Don't know if that can apply for other cases.
Capitalization matters as well! Inside my directive, I tried specifying:
templateUrl: 'Views/mytemplate'
and got the "more than once" warning. The warning disappeared when I changed it to:
templateUrl: 'views/mytemplate'
Correct me, but I think this happened because page that I placed the directive on was under "views" and not "Views" in the route config function.
This happened to me too with .NET and MVC 5 and after a while I realized that within the label on Index.cshtml file:
<div data-ng-view=""></div>
again included as section scripts happens to you. To solve the problem on the server side what I do is return the partial view. Something like:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Login()
{
return PartialView();
}
public ActionResult About()
{
return PartialView();
}
}
I had this same problem ("Tried to Load Angular More Than Once") because I had included twice angularJs file (without perceive) in my index.html.
<script src="angular.js">
<script src="angular.min.js">
I have the same problem, because I have angular two times in 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>
Note that the warning arises only when html5 mode is true, when my html5 mode was false, I did not see this warning.
So removing the first angular.js solves the problem.
You must change angular route '/'! It is a problem because '/' base url request. If you change '/' => '/home' or '/hede' angular will good work.
I was having the exact same error. After some hours, I noticed that there was an extra comma in my .JSON file, on the very last key-value pair.
//doesn't work
{
"key":"value",
"key":"value",
"key":"value",
}
Then I just took it off (the last ',') and that solved the problem.
//works
{
"key":"value",
"key":"value",
"key":"value"
}
For anyone that has this issue in the future, for me it was caused by an arrow function instead of a function literal in a run block:
// bad
module('a').run(() => ...)
// good
module('a').run(function() {...})
In my case I have index.html which embeds 2 views i.e view1.html and view2.html. I developed these 2 views independent of index.html and then tried to embed using route. So I had all the script files defined in the 2 view html files which was causing this warning. The warning disappeared after removing the inclusion of angularJS script files from views.
In short, the script files angularJS, jQuery and angular-route.js should be included only in index.html and not in view html files.
Another case is with Webpack which concating angular into the bundle.js, beside the angular that is loaded from index.html <script> tag.
this was because we used explicit importing of angular in many files:
define(['angular', ...], function(angular, ...){
so, webpack decided to bundle it too. cleaning all of those into:
define([...], function(...){
was fixing Tried to Load Angular More Than Once for once and all.
My problem was the following line (HAML):
%a{"href"=>"#", "ng-click" => "showConfirmDeleteModal()"} Delete
Notice that I have a angular ng-click and I have an href tag which will jump to # which is the same page. I just had to remove the href tag and I was good to go.
The problem for me was, I had taken backup of controller (js) file with some other changes in the same folder and bundling loaded both the controller files (original and backup js). Removing backup from the scripts folder, that was bundled solved the issue.
참고URL : https://stackoverflow.com/questions/22595878/tried-to-load-angular-more-than-once
'IT TIP' 카테고리의 다른 글
| Angular2-HTTP RequestOptions 헤더 (0) | 2020.10.22 |
|---|---|
| Ruby의 문자열에서 특정 문자를 삭제하는 방법은 무엇입니까? (0) | 2020.10.22 |
| C # 및 Java에 "null"이있는 이유는 무엇입니까? (0) | 2020.10.22 |
| xmlserializer가 일반 xml 만 직렬화하도록하려면 어떻게해야합니까? (0) | 2020.10.22 |
| 첫 번째 Heroku 배포 실패 ʻerror code = H10` (0) | 2020.10.22 |