경고: 각도 로드를 두 번 이상 시도했습니다.각도 JS
Grunt Build 실행 후 앱을 보려고 합니다.grunt serve:dist를 사용하여 모든 실제 가동 가능한 빌드를 표시하지만 브라우저에는 다음과 같은 무한 루프가 표시됩니다.
경고: 각도 로드를 두 번 이상 시도했습니다.
이 문제는 템플릿이연결 후 URL:이 잘못될 수 있습니다.이 투고와 같이:각도를 여러 번 로드하려고 했다.
하지만 이걸 어떻게 고치죠?여기 제 앱이 있습니다.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: '/'
});
}]);
제 경우, 이것은 다음의 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>닫히지 않았습니다.이로 인해 '경고: 각도 로딩 시도' 문제가 발생하였습니다.
는 현재 를 Current Page로 합니다.templateUrl특히 문제가 되는 것은 무한 루프가 반복되기 때문입니다.
페이지가 크래시 되는 무한 루프가 발생하고 있는 경우는, 다음과 같습니다.CORS 에러가 발생했을 경우는, 템플릿에 다른 도메인의 스크립트태그가 포함되어 있는 것이 원인일 수 있습니다.
$routeProvider.when('/', {
templateUrl: 'an/absolute/url/to/the/current/page.html'
});
이 문제가 있었던 이유는templateUrl의 길이 .index.html하다 " " " " 를 를 테스트해 보십시오.templatetemplateUrl
를 미지에 views폴더랑 이거 먹어봐.
$routeProvider.when('/', {
template: 'Test Template <img src="views/pic.jpg"/>',
controller: 'PostsCtrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
"테스트 템플릿"이 표시되고 이미지가 인덱스 페이지에 표시됩니다.이미지가 표시되지 않으면 경로가 잘못된 것입니다.
저도 같은 문제에 부딪혔어요.그러나 제 경우 웹 팩 빌드를 사용하면 두 가지 Angular 버전이 패키징되었습니다(Angular 1.5.5와 Angular 1.5.0).
네, post.html을 partials로 이동하고 templateUrl을 partials/posts.html로 변경하여 해결했습니다.아마도 제가 사용한 Yo 발판이 앵귤러 풀스택이기 때문인 것 같습니다.이는 see project에서 정상적으로 동작하기 때문입니다.어쨌든 고마워
이 문제는 실제로는 각도 라이브러리가 너무 많이 로드되는 것과 관련이 있습니다.
제 답변은 너무 뻔하게 들릴 수 있지만, 코드 자체는 괜찮고, 문제가 될 수 있는 것에 대한 정보도 많지 않습니다.폴더 트리를 게시할 수 있다면 유용할 수 있습니다.
그 사이에, 다음의 2가지 사항에 문제가 없는 것을 확인해 주세요.
- views/views.displays에는 angular.displays 라이브러리에 대한 호출이 포함된 스크립트태그가 포함되어 있지 않습니다.
- views/posts.html 파일은 이 위치에서 사용할 수 있습니다(완전한 URI 사용 가능).
위의 모든 것을 확인합니다(일반적으로 라우팅 오류 또는 리소스 경로에서의 일부 오류 또는 ng-app 오류).
오류 발견에 도움이 되는 포인트만 추가하고 싶습니다(ng-app이 잘못된 경우는 제외).
angular 용 서버가 다음과 같이 설정되어 있다고 가정합니다.
- /static/* (모든 스태틱 리소스) (sys, css, png...)
- /api/* rest api
- /* 기타 모든 콜은 index.direct로 리다이렉트 됩니다.
이와 같이 모든 잘못된 경로는 png, css, js 및 tpl 파일 대신 index.html을 반환합니다.이것은 /static/path가 없거나 스태틱리소스가 부족한 경우 404를 반환하지 않는 경우에도 마찬가지입니다.
요약: 서버 위치 경로 로그온을 확인합니다. 페이지를 열 때 호출하면 오류 증거를 찾을 수 있습니다.
각도 경로 '/!'를 변경해야 합니다.이는 '/' 기본 URL 요청 때문에 발생합니다.'/' => '/home' 또는 '/hede' 각도를 변경하는 것이 좋습니다.샘플:
Module.JS:
var application = angular.module('flow', ['ngRoute', 'ngResource']);
Route Config.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' });
}]);
제 경우 경고의 원인은 "angular.js" 뒤에 "angular-scenario.js"가 중복된 스크립트가 포함되어 있기 때문입니다.
angular-scenario.js를 삭제하자 경고가 사라졌습니다.
에 이 하여 근근최이이 i i i i i i i i i i i i i i를 변경하는 것이었습니다.이 오류를 해결하는 방법은 Web.config에 접속하여 변경하는 것입니다.<compilation debug="false" targetFramework="4.5.2"/>로로 합니다.<compilation debug="true" ... />게누누누누에게도도으으으!!!!!!!!!건!!
실행 중인 grunt가 작동하는 경우와 같이 솔루션이 로컬에서 작동할 수 있지만 grunt build를 실행하면 보기가 dist 디렉터리에 포함되지 않을 수 있습니다.예를 들어 뷰가 있고 뷰가 뷰>템플릿>모듈에 있는 경우 grunt build를 디폴트로 실행할 때 3레벨을 초과하는 것은 추가되지 않습니다.적어도 나는 그랬다.html 파일이 뷰의 dist 디렉토리에 포함되어 있는지 확인합니다.파일을 수동으로 추가해 동작하고 있는 것을 확인할 수 없는 경우는, grunt 파일을 갱신합니다.
내 경우 Angular와 관련된 문제였다.JS Batarang Chrome Extension(버전 0.7.1).확장 기능을 비활성화하면 오류가 사라집니다.
나의 경우, 각도 라이브러리와 각도 모듈 코드가 내가 제어할 수 없는 다른 애플리케이션 내에 동적으로 로드됩니다.버튼 클릭 한 번으로 로드됩니다.처음은 정상적으로 동작하지만 사용자가 두 번째로 클릭하면 라이브러리와 다른 파일이 다시 로드되고 경고가 나타납니다.
경고: 각도 로드를 두 번 이상 시도했습니다.
var isInitialized = element.injector();
if (!isInitialized) {
angular.bootstrap(angular.element(document.getElementById('#mainDiv')), ['defaultApp']);
}
이 경우는 코드가 어떻게든 무한 루프 상태가 되는 경우입니다.코드에 여러 번 호출되는 리다이렉션이 있는지 확인합니다.
내 경우 템플릿 파일(문자열이 아님)이 비어 있었습니다.템플릿 파일을 간단한 html로 채웠더니 문제가 해결되었습니다.채우다views/posts.html암호와 함께요
실수로 존재하지 않는 루트를 로드하려고 했습니다.ui-view그러나 루트는 Angular 앱을 포함한 유효한 URL에 대응하고 있었습니다.대신 Angular 앱을 로딩했습니다.ui-view따라서 Angular의 여러 복사본이 생성됩니다.
저 같은 경우에는app-view-segment="1"index.cshtml 파일에 동일한 angular 폴더를 가리키는 참조가 2개 있습니다.@Scripts.Render선이요 각도 경로를 알려주셔서 감사합니다
이 문제에 대해 생각할 수 있는 시나리오를 하나 더 추가해 보겠습니다.
동작: 루트 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: {}
});
해결했다.기본적으로 서브패스가 생겼기 때문에 상대적인 참조는 기능하지 않게 되어 각도가 해독하기 어려운 방법으로 기능하지 않게 됩니다.
누군가 이 대답에 도움을 받았으면 좋겠다.내 인생의 한 시간 이상을 그 일로 잃었어...
마지막으로 이 문제가 발생했을 때는 루트의 templateUrl에서 선두에 있는 '/'로 되어 있었는데, 원래 존재하지 않았습니다.
이번에는 뷰 폴더 아래 하위 폴더의 하위 폴더에 뷰를 배치했기 때문에 빌드 후 템플릿 캐시에 렌더링되지 않았습니다.Gruntfile.js가 '/views'에서 3단계 폴더를 선택하도록 조정되지 않았습니다.
yo-grunt 빌드에서 렌더링된 내용을 확인하려면 빌드가 완료된 후 .tmp/templateCache.js를 참조하십시오.
저는 AngularJS LTS 팀이 이러한 오류에 더 잘 대처할 수 있는 방법을 찾고 문제가 어디에 있는지에 대한 더 나은 단서를 찾기를 바랍니다.
이게 도움이 됐으면 좋겠네요!
이 문제에 부딪혔는데, 제 karma.conf.js 파일에서 문제가 발생하였습니다.
브라우저에 로드할 파일 패턴을 지정할 때 와일드카드 식별자를 사용하여 Angular를 로드했습니다.JS는 다음과 같습니다.
'path_to_angular/angular/*.js
여러 개의 파일을 로드하는 경우 Angular예를 들어 angular.js 나 angular.min.js 와 같은 디렉토리내의 JS 는, 이 에러가 발생합니다.
이 오류를 방지하려면 와일드카드를 사용하지 않고 단일 경로를 지정하십시오.
'path_to_angular/angular/angular.js'
또는
'path_to_angular/angular/angular.min.js'
효과가 있을 거야
webpack + Angular를 사용하고 있기 때문에 문제/수정 사항이 조금 다를 수 있습니다.JS.
, 이렇게 쓰죠.html-webpack-plugin★★★★★★★★★★★★★★★★★★★★★.index.html에도 파도있있 file file file가 있었습니다.
<script type="text/javascript" src="./bundle.js"></script>
html-webpack-plugin이 행이 자동으로 추가되기 때문에 HTML에 두 번 추가되었습니다.
나도 같은 문제에 부딪혔고 그래서 여기 온 거야.하지만 어떤 대답도 나에게는 통하지 않았다.이 URL은 "URL"이어야 .localhost:3000/#/' 같은 localhost:3000/xxx/public/index.html/#/을 사용하다"WebStorm" node.js" "ui-router" "WebStorm" "node.js" 입니다.
제 경우 index.html 내의 비활성 자원 링크입니다.
<link rel="import" href="/somethingmissing.html">
언급URL : https://stackoverflow.com/questions/23499853/warning-tried-to-load-angular-more-than-once-angular-js
'programing' 카테고리의 다른 글
| JSON - XML CDATA와 동등한 것이 있습니까? (0) | 2023.03.20 |
|---|---|
| Django Rest Framework 토큰에서 인증된 사용자 가져오기 (0) | 2023.03.20 |
| MongoDB 집약:총 레코드 수를 어떻게 얻습니까? (0) | 2023.03.20 |
| AngularJs를 통해 브라우저가 캐시를 강제로 클리어합니다. (0) | 2023.03.20 |
| 각도 변환으로 현재 언어 가져오기 (0) | 2023.03.20 |