每当包含JQuery时,Angular都会抛出错误
Cle*_*man 7 angularjs systemjs
注意
我在ASP.Net 4.6应用程序中使用SystemJS,JSPM,Angular和jQuery.但是,每当我尝试在应用程序中包含jQuery时,我都会遇到模块加载错误.
我上传了一个简单的应用程序,以重现问题到Dropbox:简单的应用程序,再现问题
(您将需要Visual Studio 2015才能运行)
基本上,在项目中有一个文件/scripts/app/app.js,如下所示:
import 'jquery';
import "angular";
var ByobApp = angular.module("ByobApp", []);
当代码看起来像这样尝试运行应用程序时,您会看到这些错误(Chrome屏幕截图):
但是,当您将代码更改为:
//import 'jquery';
import "angular";
var ByobApp = angular.module("ByobApp", []);
(注释掉jQuery导入).应用程序将加载正常.
显然jQuery导入有问题.但我不知道是什么!
任何帮助都会很棒.
编辑
基于注释,我将_Layout.cshtml更改为这样(包括JQuery和Angular,而不尝试使用SystemJs加载它):
<script src="~/scripts/jspm_packages/npm/jquery@2.2.0/dist/jquery.min.js"></script>
<script src="~/scripts/jspm_packages/github/angular/bower-angular@1.4.8/angular.min.js"></script>
<script src="/scripts/jspm_packages/system.js"></script>
<script src="/scripts/config.js"></script>
<script>
System.baseURL = "/scripts";
</script>
我让app.js看起来像这样:
//import 'jquery';
//import "angular";
var ByobApp = angular.module("ByobApp", []);
错误是一样的.
编辑2
如果我改为包含Zepto库,它可以正常工作.Zepto是jQuery API的1:1替代品,因此使用它完全相同!
总长DR
它看起来像一个有角度的错误（可能特定于 1.4.8 版本和 system.js 的使用）。解决方案是手动引导应用程序。
误差分析
问题是当角度应用程序启动时ng-app：
<body ng-app="ByobApp">
...
</body>
应用程序代码jquery之前加载angular（使用system.js）：
import 'jquery';
import "angular";
var ByobApp = angular.module("ByobApp", []);
角度会引发错误：
Uncaught Error: [$injector:modulerr]
Failed to instantiate module ByobApp due to:
Error: [$injector:nomod] Module 'ByobApp' is not available!
You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies
as the second argument.
http://errors.angularjs.org/1.4.8/$injector/nomod?p0=ByobApp
如果删除 jquery 导入或者即使我们交换 jquery 和 Angular，它也可以工作：
import "angular";
import 'jquery'; // it works if jquery is second
var ByobApp = angular.module("ByobApp", []);
解决方法
解决方案是手动初始化角度应用程序：
<!-- do not include ng-app="ByobApp" here -->
<body>
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<script src="/scripts/jspm_packages/system.js"></script>
<script src="/scripts/config.js"></script>
<script>
System.baseURL = "/scripts";
System['import']('app/app').then(function() {
// Manually bootstrap once application is loaded.
// This code can be in the app.js as well, but it should
// be at the end (when everything else is defined).
angular.element(document).ready(function () {
angular.bootstrap(document, ['ByobApp']);
});
});
</script>
</body>
测试代码：
- index_bug.html - 引发错误的版本
- index.html - 工作版本，单击“主页”将消息从一个控制器发送到另一个控制器
- app.js - 应用程序代码
| 归档时间： |
|
| 查看次数： |
1620 次 |
| 最近记录： |