web-dev-qa-db-ja.com

警告：angularを複数回ロードしようとしました。 Angular JS

Grunt Buildを実行した後、アプリを表示しようとしています。 grunt serve：distを使用して、すべてのプロダクション対応ビルドを確認しますが、ブラウザーでは次のような無限ループが発生します。

警告：angularを複数回ロードしようとしました。

これは、連結後にTemplateURL：が間違っている可能性があるために発生しました。この投稿のように： ロードAngular More Than Once

しかし、どうすればこれを修正できますか？ここに私の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: '/'
      });
  }]);
javascriptangularjsgruntjs
46
Vishal Sakaria

私の場合、これは次の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を複数回ロードしようとしました。'問題が発生しました。

39
jhohlfeld

この問題は、現在のページをtemplateUrlとして使用することによっても発生します。これは、それ自体を何度も参照する無限ループになるため、特に問題があります。

ページをクラッシュさせる無限ループが発生している場合は、おそらくこれです。 CORSエラーが発生している場合は、おそらくテンプレートに別のドメインのスクリプトタグが含まれていることが原因です。

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

index.htmlが別のルート構造にあるためにtemplateUrlパスが間違っていたため、この問題が発生しました。 templateの代わりにtemplateUrlを使用してURLパスをテストしてみてください。

viewsフォルダーに画像を配置して、これを試してください。

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

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

「テストテンプレート」が表示され、インデックスページに画像が表示されます。画像が表示されない場合は、パスが間違っています。

12
Blake Bowen

私は同じ問題に出会いました。しかし、私の場合、webpackビルドで2つの異なるAngularバージョンがパッケージ化されました（Angular 1.5.5およびAngular 1.5.0）。

6
fernando

ええ、post.htmlをパーシャルに移動し、templateUrlをpartials/posts.htmlに変更して整理しました。これは、angular fullstackを使用したYoの足場によるものと思われます。これは、seeプロジェクトで問題なく動作するためです。とにかくありがとう

3
Vishal Sakaria

上記のすべてを確認します（通常、ルーティングエラーまたはリソースパス上のエラーまたはng-appエラー）。

エラーを見つけるのに役立つポイントのみを追加したいと思います（間違ったng-appの場合ではありません）。

angularのサーバーが次のように設定されている場合：

  • / static/*すべての静的リソース（js、css、png ...）
  • / api/* rest api
  • / *他のすべての呼び出しはindex.htmlにリダイレクトされます

この方法では、/ static/pathがない場合、または静的リソースが見つからない場合に404​​を返す場合でも、間違ったパスはすべてpng、css、js、およびtplファイルではなくindex.htmlを返します。

要するに：ページを開いているときに呼び出しているパスにあるサーバーのログを確認してください、そこでエラーの証拠が見つかりました。

2
Lattanzio

私の場合、警告の原因は、「angular.js」の後に「angular-scenario.js」が含まれている冗長なスクリプトでした。

「angular-scenario.js」を削除すると、警告が消えました。

2
Halis S.

問題は、実際にangularライブラリが何度もロードされることに関連しています。

私の返信はあまりにも明白に聞こえるかもしれませんが、コード自体は問題なく、問題の原因に関する情報はあまりありません。フォルダツリーを投稿できる場合は、役に立つかもしれません。

それまでの間、さらに調査する前に、次の2つのことを確認してください。

  • views/posts.htmlには、angular.jsライブラリーへの呼び出しにscriptタグが含まれていません。
  • views/posts.htmlファイルはその位置で使用できます（完全なURIを使用する場合があります）。
2
Francesco

angularルート '/'を変更する必要があります！ '/'ベース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' });
    }]);
2
Salih KARAHAN

私は最近このエラーを受け取ったので、Web.configに移動して<compilation debug="false" targetFramework="4.5.2"/>を<compilation debug="true" ... />に変更することで解決しました。乾杯！

1
DDelgro

ui-viewに存在しないルートを誤ってロードしようとしました。ただし、ルートはAngularアプリを含む有効なURLに対応していました。代わりに、そのAngularアプリをui-viewにロードしました。したがって、Angularの複数のコピーです。

0
Westy92

これは、コードが何らかの形で無限ループに陥る場合です。コードに複数回呼び出されるリダイレクトがあるかどうかを必ず確認してください。

0
Kurkula

私の場合、テンプレートファイル（文字列ではない）は空でした。テンプレートファイルに単純なhtmlを入力すると、問題は解決しました。 views/posts.htmlにコードを入力します。

0
Gegham Khachatryan

私の場合、angularライブラリとangularモジュールコードは、制御できない別のアプリケーション内に動的にロードされます。そして、これらはボタンをクリックするだけでロードされます。初めて正常に動作しますが、ユーザーが2回目にクリックすると、ライブラリと他のファイルが再び読み込まれ、警告が表示されます。

警告：angularを複数回ロードしようとしました。

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

この問題に出くわし、karma.conf.jsファイルで問題が発生したことがわかりました。

ブラウザに読み込むファイルパターンを指定するとき、次のようにワイルドカード識別子を使用してAngularJSを読み込みました。

'path_to_angular/angular/*.js

たとえば、angular.jsやangular.min.jsなど、そのディレクトリ内にAngularJSをロードするファイルが複数ある場合、このエラーがスローされます。

このエラーを回避するには、ワイルドカードなしで単一のパスを指定するだけです。

'path_to_angular/angular/angular.js'

または

'path_to_angular/angular/angular.min.js'

トリックを行う必要があります。

0
JC4NT

私の場合、app-view-segment="1"がなく、index.cshtmlファイルの@Scripts.Render行にあるangularの同じフォルダーを指す2つの参照がありました。 angularルーティングを指定していただきありがとうございます。

0
Umpa

前回これが私に起こったのは、ルートのtemplateUrlの先頭の「/」でしたが、そこにあるとは思われませんでした。

ただし、今回は、これらのビューをビューフォルダーの下のサブフォルダーのサブフォルダーに配置したため、ビルド後にテンプレートキャッシュにレンダリングされないビューの束でした。 Gruntfile.jsは、「/ views」から第3レベルのフォルダーを取得するように調整されていません。

ヨーグルトビルドでレンダリングされたものを調べるには、ビルドの完了後に.tmp/templateCache.jsを確認します。

AngularJS LTSのチームが、この種のエラーをより適切に処理する方法を見つけ、問題がどこにあるかについてのより良い手がかりを見つけたいと思います。

お役に立てれば！

0
Ady Rosen

この問題にもう1つの可能なシナリオを追加するだけです...

Behavior：ルートURLからロードすると問題なく動作しますが、他のルートからページをロードする（または別のルートを入力する）たびにこの問題が発生します。

同様の理由：ネストされたコンポーネントまたはページの1つが、絶対パスではなく相対パスから何かをロードしています。

私の場合、テンプレートに相対パスをロードする参照コンポーネントに関係していました。

したがって、たとえばこれから変更する場合：

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は、この非常に解読しにくい方法で失敗することを決定します。

うまくいけば、誰かがこの答えに助けられます。私は人生で1時間以上を失いました...

0
Cory

たとえば、実行中のgruntサーブの場合、ソリューションはローカルで機能しますが、gruntビルドを実行すると、ビューがdistディレクトリに含まれない場合があります。たとえば、ビューがあり、そのビューがviews> templates> modules2つのレベルデフォルトでgrunt buildを実行すると追加されません。少なくとも私にはそうでした。 HTMLファイルがビューのdistディレクトリに含まれているかどうかを確認します。手動でファイルを追加して機能することを確認しない場合は、Gruntファイルを適宜更新してください。

0
Galactic Ranger

私の場合、問題はAngularJS Batarang Chrome Extension（バージョン0.7.1）に関連していました。拡張機能を無効にすると、エラーは消えました。

0
Borivojević