web-dev-qa-db-ja.com

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

角度ジェネレーターを備えたヨーマンアプリを構築しています。

私のindex.htmlファイルに含まれているjsライブラリは次のとおりです。

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/modernizr/modernizr.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="bower_components/d3/d3.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>

この問題は、jqueryが含まれている場合にのみ発生しますbefore angularそしてそれが後の場合は発生しません。

タイトルが示す問題は、「警告：ロードしようとしたangular複数回」コンソールとアプリを初期化できません。

なぜこれが起こり得るのか誰かに手掛かりがありますか？

私は単一のng-appを持っています、angular一度だけ...とすべてを含めています。スクリプトの位置を変更すると修正されるため、構成に関連するものではないようです。

手がかりはありますか？

スクリプトの順序を含めるように構成できるかどうか誰かが知っていますか？角度ジェネレータを使用しているので、私はこれをuseminで設定してバウワースクリプトを含めました。スクリプトを含める順序を指定できる方法があるのでしょうか。

これは私のプロジェクトのbower.jsonファイルです：

{
  "name": "<name>",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.15",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "angular-ui-router": "~0.2.10",
    "modernizr": "~2.8.1",
    "d3": "~3.4.6",
    "angular-ui-select2": "~0.0.5"
  },
  "devDependencies": {
    "angular-mocks": "1.2.15",
    "angular-scenario": "1.2.15"
  }
}

運が悪いのにグーグルで検索してみました。前もって感謝します！

更新1：

この方法でスクリプトを含めると、angularが2回含まれることはなく、常に最初に読み込まれることがわかりました。

  <!-- build:js scripts/vendor.js -->
  <script src="bower_components/angular/angular.js"></script>
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/modernizr/modernizr.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="bower_components/d3/d3.js"></script>
  <script src="bower_components/select2/select2.js"></script>
  <script src="bower_components/angular-ui-select2/src/select2.js"></script>
  <!-- endbower -->

最善の解決策ではありませんが、少なくとも今のところ...とにかく、私はすべてをbower：jsタグの中に入れたいです。

angularjsboweryeoman-generator-angular
10
Agustin Lopez

長い時間のテストの後、結局は私のindex.htmlファイルで

<ui-view />

angular ui routerによって使用され、これに置き換えるために、トリックを行いました。

<ui-view></ui-view>
25
Agustin Lopez

私にとって、これはルートでビューを誤って参照したときに発生しました。

私が持っていた：

.when('/route', {
      templateUrl: 'views/myPage.html',
      controller : 'myCtrl'
})

私の見解はviews/mypage.html

エラーメッセージは私が期待するものではありません。ビューが見つからないというエラーが発生すると予想していました。

12
Jim Clouse

これは.NETとMVC 5でも起こりましたが、しばらくすると、ラベル内でngviewに気づきました

セクションスクリプトが発生すると、再び含まれます。サーバー側の問題を解決するには、部分ビューを返す必要があります。何かのようなもの：

public ActionResult Index()
{
    return View();
}

public ActionResult Login()
{
    return PartialView();
}

public ActionResult About()
{
    return PartialView();
}
3
Leon

同じ警告が表示されましたが、含まれているファイルの順序と使用されているバージョンが原因でした。

上記の警告を解決するために、次の順序でファイルを再度含めました。

jquery.js
jqueryui.js
angular.js

注： angularjsがjqueryをangularjsに置き換えることができるように、jqLiteの前にjQueryスクリプトタグを追加する必要があります。

さらに、私のコードはAngularJS v1.2.0、ただしより高いangularバージョンではありません。jqueryとangularjsのバージョンの互換性も確認してください。

2
div

Electronアプリを使用しているときにも、同様の問題に直面していました。私はindex.htmlページにangular.min.jsを含めており、そのページにアクセスするたびに、警告が表示される回数が1、2、4、8、16などのように倍になっていた。したがって、4/5の更新後、アプリは非常に遅くなっていました。私が見つけた解決策は次のとおりです。angular.min.jsをスクリプトタグに含める代わりに、require（ './ path/angular.min.js'）;を使用します。

これにより、ファイルは1回だけロードされます。

ノードのドキュメントによると

キャッシュ＃

モジュールは、最初にロードされた後にキャッシュされます。これは、（とりわけ）require（ 'foo'）を呼び出すたびに、同じファイルに解決される場合、まったく同じオブジェクトが返されることを意味します。

Require（ 'foo'）を複数回呼び出しても、モジュールコードが複数回実行されることはありません。これは重要な機能です。これにより、「部分的に完了した」オブジェクトを返すことができるため、循環が発生する場合でも推移的な依存関係をロードできます。

0
ishwar rimal

以下は、誰もカバーしていない別のシナリオですが、同じ問題を引き起こしており、最初は明らかではないかもしれません。

Angular-template-cacheプラグインでGulpまたは他の同様のツールを使用していて、すべてのコードを1つのファイルにマージする場合は、実際の連結が行われる前にテンプレートキャッシュの生成が実行されることを確認する必要があります。 jsにはtemplatecacheの部分はありません。

Gulpfileは次のようになります。

var paths = {
  styles: 'assets/less/style.less',
  scripts: 'assets/js/**/*.js',
  templates: 'views/**/*.html'
}

function styles() {
  return gulp.src(paths.styles)
    .pipe(less())
    .pipe(cleanCSS())
    .pipe(gulp.dest('./assets/css/'));
}

function scripts() {
  return gulp.src(paths.scripts, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('app.min.js'))
    .pipe(gulp.dest('./assets/js'));
}

function templatecache() {
  return gulp.src(paths.templates)
    .pipe(templateCache({ module: 'ams', root: '/views/'}))
    .pipe(gulp.dest('./assets/js'));
}

function clean() {
  return del(['assets/js/app.min.js', 'assets/js/templates.js', 'assets/css/style.css']);
};

var build = gulp.series(clean, templatecache, gulp.parallel(styles, scripts));

重要な部分は最後の行で、クリーンとテンプレートキャッシュが最初に実行され、次にスクリプトとスタイルが並行して実行されます。私もtemplatecacheを並行して実行していて、angularjsの警告が重複して表示されました。それが誰かを助けることを願っています。

0
Radu Ciobanu

はい、HTMLページでJSスクリプトの順序を並べ替えることで問題を解決しました。

angular jsスクリプトを最初の順序で配置すると、これは発生しなくなります。

それは非常に奇妙です。

ありがとう。

0
kevin_song