警告:试图加载角度不止一次。当我包含JQuery时

时间:2014-05-20 17:06:05

标签: angularjs bower yeoman-generator-angular

我正在使用角度发生器构建一个自耕农应用程序。

我的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包含在之前之前才会出现问题,如果它在它之后就不会发生。

标题所述的问题是我在控制台中得到“警告:尝试多次加载角度”并且应用程序无法初始化。

有没有人有任何线索可以解决这个问题?

我有一个ng-app,我只包括一次角度......以及一切。看起来它与配置有关,因为更改脚本的位置会修复它。

你们有什么线索吗?

有谁知道我是否能够配置包含脚本的顺序?当我使用角度生成器时,我已经使用usemin来设置它以包含bower脚本。我想知道是否有任何方法可以指定包含脚本的顺序。

这是我项目的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:

我刚刚发现,如果我以这种方式包含脚本,则角度将不会包含两次,并且始终首先加载。

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

不是最好的解决方案,但至少现在......无论如何,我想把一切都放在凉亭内:js标签。

8 个答案:

答案 0 :(得分:25)

经过长时间的测试......最终我的index.html文件中有了

<ui-view />

由角度ui路由器使用并将其替换为此,就可以了。

<ui-view></ui-view>

答案 1 :(得分:12)

对我来说,当我在路线中错误地引用我的视图时,就会发生这种情况。

我有:

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

但我的观点名为views/mypage.html

错误消息不是我所期望的。我原以为缺少视图错误。

答案 2 :(得分:3)

这也发生在.NET和MVC 5上,过了一段时间我意识到在标签内: ngview

再次包含在部分脚本中。要解决服务器端的问题,我所做的就是返回局部视图。类似的东西:

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

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

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

答案 3 :(得分:2)

我收到同样的警告,这是因为包含的文件的顺序以及使用的版本。

要解决上述警告,我按以下顺序重新包含文件:

jquery.js
jqueryui.js
angular.js

注意:您必须在jquery之前添加angularjs脚本代码,以便angularjs可以jqLite替换jQuery

此外,我的代码正在使用AngularJS v1.2.0,但没有更高的角度版本。因此,请检查您的jquery和angularjs版本兼容性。

答案 4 :(得分:0)

是的,我通过在html页面中对JS脚本顺序进行排序来解决我的问题。

当将角度js脚本放在第一个顺序时,这将不再发生。

这很奇怪。

感谢。

答案 5 :(得分:0)

我在使用电子应用程序时遇到了类似的问题。 我在index.html页面中包含了angular.min.js,每次进入该页面时,警告过去常常出现的次数是双倍的,如1,2,4,8,16等。所以在4/5刷新之后,app过去常常变得非常慢。 我找到的解决方案是...... 不使用带脚本标记的angular.min.js,而是使用require(&#39; ./ path / angular.min.js&#39;);

这只会加载一次文件。

根据节点文档

缓存 #

模块在第一次加载后进行缓存。这意味着(除其他外)每次调用require(&#39; foo&#39;)将获得完全相同的返回对象,如果它将解析为同一文件。

多次调用require(&#39; foo&#39;)可能不会导致模块代码多次执行。这是一个重要的特征。有了它,&#34;部分完成&#34;可以返回对象,从而允许传递依赖性,即使它们会导致循环。

答案 6 :(得分:0)

这是另一个没有被任何人覆盖的场景,但它造成了同样的问题,起初可能并不明显:

如果您正在使用Gulp或任何其他类似的工具与angular-template-cache插件并将所有代码合并到一个文件中,您需要确保在实际连接发生之前执行templatecache生成,否则您的应用程序.min.js没有模板缓存部分。

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

关键部分是最后一行,首先执行clean和templatecache,然后并行执行脚本和样式。我也在并行执行templatecache并进入重复的angularjs警告。 希望它可以帮到某人。

答案 7 :(得分:-7)

工具visual studio ----只需注释angularjs文件就像这样`

cursor:pointer