Angularjs 警告:尝试多次加载角度。当我包含JQuery时
我正在构建一个带有角度生成器的yeoman应用程序 my index.html文件中包含的js库包括:Angularjs 警告:尝试多次加载角度。当我包含JQuery时,angularjs,bower,yeoman-generator-angular,Angularjs,Bower,Yeoman Generator Angular,我正在构建一个带有角度生成器的yeoman应用程序 my 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/angula
<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包含在之前时才会出现问题,如果jquery包含在后面则不会出现问题
标题中的问题是,我在控制台中收到“警告:尝试多次加载angular”,应用程序无法初始化
有人知道为什么会发生这种情况吗
我有一个单一的ng应用程序,我只包含一次。。。还有一切。它看起来与配置无关,因为更改脚本的位置可以修复它
你们有什么线索吗
有人知道我是否能够配置为包含脚本的顺序吗?当我使用angular generator时,我已经使用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"
}
}
{
“名称”:“,
“版本”:“0.0.0”,
“依赖项”:{
“角度”:“1.2.15”,
“json3”:“~3.2.6”,
“es5垫片”:“~2.1.0”,
“角度用户界面路由器”:“~0.2.10”,
“现代化”:“~2.8.1”,
“d3”:“~3.4.6”,
“angular-ui-select2”:“~0.0.5”
},
“依赖性”:{
“角度模拟”:“1.2.15”,
“角度场景”:“1.2.15”
}
}
我曾尝试在谷歌搜索,但运气不佳。
提前谢谢
更新1:
我刚刚发现,如果我以这种方式包含脚本,angular将不会包含两次,并且总是先加载
<!-- 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标签中。经过长时间的测试。。。结果是,在我的index.html文件中,我有一个
<ui-view />
要被angular ui路由器使用并将其替换为此,请执行以下操作
<ui-view></ui-view>
我收到了同样的警告,这是因为包含的文件的顺序以及使用的版本 为了解决上述警告,我按以下顺序重新包含了这些文件:
jquery.js
jqueryui.js
angular.js
注意:您必须在angularjs
之前添加jquery
脚本标记,以便angularjs可以用jquery
替换jqLite
此外,我的代码使用的是
angularjsv1.2.0
,而不是更高的角度版本。因此,请检查jquery和angularjs版本的兼容性。对我来说,这是因为我在路由中错误地引用了我的视图
我有:
.when('/route', {
templateUrl: 'views/myPage.html',
controller : 'myCtrl'
})
但是我的视图名为views/mypage.html
错误消息不是我所期望的。我本以为会出现缺少视图的错误。工具visual studio----只需对angularjs文件进行如下注释即可`
<script src="~/Scripts/angular.min.js"></script>
</section>`
`
是的,我通过在html页面中排序JS脚本顺序解决了我的问题
当把angular js脚本放在第一位时,这种情况就不会再发生了
真奇怪
谢谢。在.NET和MVC 5中我也遇到了这种情况,过了一会儿,我意识到在标签中: ngview 再次包括作为一节脚本发生在你身上。要解决服务器端的问题,我要做的是返回部分视图。比如:
public ActionResult Index()
{
return View();
}
public ActionResult Login()
{
return PartialView();
}
public ActionResult About()
{
return PartialView();
}
在使用electron应用程序时,我遇到了类似的问题。 我在index.html页面中包含angular.min.js,每次我来到该页面时,警告出现的次数都会增加一倍。比如1,2,4,8,16等。所以在4/5刷新后,应用程序的速度会变得非常慢。 我找到的解决办法是。。 使用require('./path/angular.min.js'),而不是将angular.min.js包含在脚本标记中 这将只加载文件一次 根据节点文档 缓存 # 模块在第一次加载后被缓存。这意味着(除其他外)每个对require('foo')的调用都将返回完全相同的对象,前提是它将解析为相同的文件
多次调用require('foo')可能不会导致多次执行模块代码。这是一个重要特征。有了它,可以返回“部分完成”的对象,从而允许加载可传递的依赖项,即使它们会导致循环。下面是另一个没有被任何人介绍过的场景,但它会导致相同的问题,而且一开始可能并不明显: 如果您正在使用Gulp或任何其他类似工具与angular template cache插件并将所有代码合并到一个文件中,则需要确保在实际连接发生之前执行templatecache生成,否则您的app.min.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));
关键部分是最后一行,首先执行clean和templatecache,然后并行执行脚本和样式。我也并行执行templatecache,并进入了重复的angularjs警告。
希望它能帮助到别人。我曾经遇到过同样的问题,当使用grunt build进行构建后,路径在缩小时损坏。这意味着应用程序不断地反复调用根路径,因此AJS被反复加载。是否使用JQuery将任何东西附加到DOM中可能导致此问题?一年后保存了我的一天;)订购解决方案对meThis有效。它刚刚修复了一个困扰我几个小时的问题。非常感谢。我看到来自jQuery的无关调用试图重新加载已经加载的文件。这似乎是由使用自动关闭的ui视图标记、角度ui路由器和jquery的组合造成的。。。选中此项“在HTML 5中,表示开始标记。它不是一个“自动关闭标记”。“在我的示例中,我使用的是
ui视图
属性位于主体
标记内。我解决了