Question

注

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替代品，因此使用它完全相同！

Answer 1

使用模块加载Angular时，（不幸的是）会出现这种情况。来自initialization的文档：

Angular会在DOMContentLoaded事件时自动初始化，或者在评估angular.js脚本时，document.readyState被设置为'complete'。

在模块的情况下，document.readyState为'complete'时会加载Angular。

此时Angular会查找指定应用程序根目录的ng-app指令。如果找到ng-app指令，那么Angular将：


加载与指令
关联的模块
...

请记住，Angular是作为app.js的依赖项加载的，所以它在 app.js之前执行，即ByobApp不存在！所以上面的第一步失败了，你得到了错误。

你必须使用手动初始化（如Etsitra的评论中所建议的） - 将Angular与模块加载器AFAIK一起使用的唯一方法。这有效：

从主HTML文件中删除ng-app

将以下内容添加到app.js：

angular.bootstrap(document, ['ByobApp']);

Answer 2

TLDR

它看起来像一个角度错误（可能特定于1.4.8版本和system.js用法）。解决方案是引导应用程序manually。

错误分析

问题是当角度应用程序使用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 - 工作版，点击＆＃39; Home＆＃39;将消息从一个控制器发送到另一个控制器
app.js - 申请代码

包含JQuery时，Angular会抛出错误

2 个答案:

TLDR

错误分析

解决方法