web-dev-qa-db-ja.com

Angularを複数回ロードしようとしました

Yeomanの足場アプリ（angular fullstack generator）があります。

grunt serveは正常に動作しますが、grunt buildは、おそらく角度の循環参照が原因で、メモリをロックするディストリビューションを生成します。

angularを1.2.15にアップグレードしました。私が得るエラーは次のとおりです：

WARNING: Tried to Load Angular More Than Once

アップグレード前のエラーは次のとおりです。

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

ビルド/ミニフィケーション後にのみ発生するため、デバッグするのはかなり困難です。私のモジュールはすべて、角度の配列形式であるため、縮小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');
javascriptangularjsgruntjs
73
Kyle

これにはいくつかの問題があります。本質的には、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を再読み込みする再帰が発生し、angular（およびその他すべて）を繰り返し読み込みます。

私の場合、grunt-concatが原因でbuildUrlが間違っていましたが、それは前ではありませんでした。

143
Kyle

この問題は、$ templateCacheProviderがtemplateCache内のテンプレートを解決しようとしたとき、または存在しない

例：

templateUrl: 'views/wrongPathToTemplate'

する必要があります：

templateUrl: 'views/home.html'
16
grant

誰もこれをどこにも言及していないようですので、ここでそれが私を引き起こした：私は私の体にng-viewディレクティブを持っていました。そのように変更する

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

エラーを停止しました。

14
Christian Geese

これはapp.jsとはまったく関係ありません。代わりに、Angular JSライブラリを複数回含めると、この警告がログに記録されます。

this JSBin でエラーを再現できました。 2つのスクリプトタグ（2つの異なるバージョン）に注意してください。

<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コード。

12
SomeKittens

私の場合、ページでangular jsとjqueryを使用しているときにこのエラーが発生していました。

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

そして、警告は消えました。

6
jGupta

また、このような問題に直面していて、無限ループが継続的に発生し、ページが無限にリロードされていました。少しデバッグした後、angularがテンプレートをロードできませんが特定のIDで指定されていたため、エラーが発生していることがわかりました。 。

angularアプリで指定するURLに注意してください。正しくない場合、angularは最終的にそれを探し続けることができ、無限ループにつながります。

お役に立てれば！

6
Kumar Shubham

私は同じ問題を抱えていました。問題はJQueryとAngularの競合でした。 Angularは、それ自体の完全なJQueryライブラリを設定できませんでした。ほとんどの場合JQLiteで十分なので、最初にAngularをWebページに含めてから、Jqueryをロードしました。エラーはなくなりました。

6
Mahdi K.

今日この問題があり、私がそれをどのように修正したかを投稿すると思いました。私の場合、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の無限再帰ロード（毎回angularライブラリをロード）。

次のように、routProviderからindex.htmlを削除するだけで解決できました。

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

私はコードペンでその問題を抱えていましたが、それはAngularの前にJQueryをロードしていたからです。それが他のケースに当てはまるかどうかわからない。

2
Salix

私は同様の問題を抱えていましたが、私にとっては、コントローラーのセミコロンが欠落していることが原因でした。アプリの縮小により、コードが正しく実行されなかった可能性があります（おそらく、結果のコードが状態の変化を引き起こし、ビューがレンダリングされ、コントローラーがコードを再度実行するなど）。

2
Dia Kharrat

Index.htmlにangleJsファイルを2回（知覚せずに）含めたため、この同じ問題（「Angularを1回以上ロードしようとしました」）が発生しました。

<script src="angular.js">
<script src="angular.min.js">
1
Biruel Rick

大文字も重要です！私のディレクティブの中で、私は指定しようとしました：

templateUrl: 'Views/mytemplate'

「複数回」の警告を受け取りました。警告を次のように変更すると消えました。

templateUrl: 'views/mytemplate'

私を修正しますが、私はディレクティブを配置したページがルート設定関数の「ビュー」ではなく「ビュー」の下にあったために起こったと思います。

1
Arman Bimatov

index.htmlにangularが2回あるため、同じ問題があります。

<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モードがtrueの場合にのみ発生することに注意してください。html5モードがfalseの場合、この警告は表示されませんでした。

したがって、最初のangular.jsを削除すると問題が解決します。

1
SoftTimur

これは.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();
    }
}
1
Joseph

私の問題は次の行（HAML）でした：

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

angular ng-clickと、同じページである#にジャンプするhrefタグがあることに注意してください。ただhrefタグを削除する必要があり、行ってよかったです。

0
schmudu

別の場合は、angularをbundle.jsに連結するWebpackで、index.html <script>タグからロードされるangularの横にあります。

これは、多くのファイルでangularの明示的なインポートを使用したためです。

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

そのため、webpackもバンドルすることにしました。それらすべてを次のようにクリーニングします。

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

Tried to Load Angular More Than Onceを一度だけ修正していました。

0
ET-CS

私にとっての問題は、同じフォルダー内でコントローラー（js）ファイルのいくつかの他の変更をバックアップし、両方のコントローラーファイル（元のjsとバックアップjs）をロードしたことです。バンドルされていたスクリプトフォルダからバックアップを削除すると、問題が解決しました。

0
iTSrAVIE

angularルート '/'を変更する必要があります！ '/'ベースurlリクエストのため、これは問題です。 '/' => '/ home'または '/ hede'を変更すると、angularが適切に機能します。

0
Salih KARAHAN

私の場合、view1.htmlとview2.htmlの2つのビューを埋め込むindex.htmlがあります。これら2つのビューをindex.htmlから独立して開発し、ルートを使用して埋め込みを試みました。そのため、この警告の原因となった2つのビューhtmlファイルですべてのスクリプトファイルを定義しました。ビューからangleJSスクリプトファイルのインクルージョンを削除すると、警告は消えました。

要するに、スクリプトファイル、angularJS、jQuery、angular-route.jsは、view htmlファイルではなく、index.htmlにのみ含める必要があります。

0
Maverick

将来この問題を抱えている人にとっては、私にとってはrunブロック内の関数リテラルではなく矢印関数が原因でした。

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

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

まったく同じエラーが発生していました。数時間後、最後のキーと値のペアに、.JSONファイルに余分なコンマがあることに気付きました。

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

それから私はちょうどそれ（最後の「、」）を外し、それは問題を解決しました。

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