angularjs – 只要包含JQuery,Angular就会抛出错误

发布时间：2020-12-17 08:32:59 所属栏目：安全来源：网络整理

导读：注意 This is a link to a sample application that reproduces the issue 我在ASP.Net 4.6应用程序中使用SystemJS,JSPM,Angular和jQuery.但是,每当我尝试在应用程序中包含jQuery时,我都会遇到模块加载错误. 我上传了一个简单的应用程序,将问题重现到Dropbox

注意

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

TLDR

它看起来像一个角度错误(可能特定于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 – 申请代码

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!