This is a link to a sample application that reproduces the issue
我在ASP.Net 4.6应用程序中使用SystemJS,JSPM,Angular和jQuery.但是,每当我尝试在应用程序中包含jQuery时,我都会遇到模块加载错误.
我上传了一个简单的应用程序,将问题重现到DropBox：Simple App That Reproduces Issue
(您需要运行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替代品,因此使用它完全相同！
它看起来像一个角度错误(可能特定于1.4.8版本和system.js用法).
解决方案是引导应用程序manually.
错误分析
问题是当使用ng-app自举角度app时：
<body ng-app="ByobApp">
...
</body>
应用程序代码在angular之前加载jquery(使用system.js)：
import 'jquery';
import "angular";
var ByobApp = angular.module("ByobApp",[]);
而angular会引发错误：
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 – 申请代码
