Question

在 angular2 中尝试使用 jquery 时出现 ReferenceError: Require not defined

2016-05-02

3720

jquery typescript angular referenceerror

我无法将 jQuery 与 angular2 结合使用。我的朋友在 Mac 上成功使用它，但在我的 Windows 机器上却不行。

错误：

jquery-ui.js:1 Uncaught ReferenceError: require is not defined
angular2.dev.js:23935 EXCEPTION: TypeError: jQuery(...).find(...).sortable is not a function in [null]
angular2.dev.js:23925 EXCEPTION: TypeError: jQuery(...).find(...).sortable is not a function in [null]BrowserDomAdapter.logError @ angular2.dev.js:23925
angular2.dev.js:23925 ORIGINAL EXCEPTION: TypeError: jQuery(...).find(...).sortable is not a functionBrowserDomAdapter.logError @ angular2.dev.js:23925
angular2.dev.js:23925 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23925
angular2.dev.js:23925 TypeError: jQuery(...).find(...).sortable is not a function at EditPresentationComponent.ngOnInit

我们使用 jquery 的代码片段。

import { Component, OnInit, ElementRef, Inject } from 'angular2/core';

declare var jQuery: any;

    @Component({
        selector: 'edit-presentation',
        templateUrl: 'app/Edit Presentation/edit_presentation.component.html'
    })

export class EditPresentationComponent implements OnInit {
    elementRef: ElementRef;

    isMyPresentationEmpty = true;

    constructor(@Inject(ElementRef) elementRef: ElementRef) {
        this.elementRef = elementRef;
    }

    ngOnInit() {
        var self = this;

        // Initialize Sortable on lists
        var oldList, newList, item, oldIndex;
        jQuery(this.elementRef.nativeElement).find('.slide-categories .sortable-list').sortable({
            start: function(event, ui) {
                item = ui.item;
                oldIndex = item.index();
                newList = oldList = ui.item.parent().parent();
            },
            change: function(event, ui) {  
                if (ui.sender) newList = ui.placeholder.parent().parent();
                // Check for empty list and hide/show instruction text
                if (jQuery('.my-presentation-column .agile-list').has('li:not(".ui-sortable-helper")').length) {
                    self.isMyPresentationEmpty = false;
                } else {
                    self.isMyPresentationEmpty = true;
                }
            },
            stop: function(event, ui) {
                if (oldList[0] != jQuery(event.toElement).parent().parent().parent().parent()[0]) {
                    if (jQuery(event.target).parent().hasClass('slide-categories')) {
                        if (oldIndex == 0) {
                            jQuery(event.target).prepend(item.clone());
                        } else {
                            jQuery(event.target).find('li:eq(' + (oldIndex - 1) + ')').after(item.clone());
                        }
                    } else {
                        item.remove();
                    }
                }
            },
            connectWith: ".sortable-list"
        }).disableSelection();

总的来说，当我执行 npm install jquery 或 npm install jquery-ui 时，我得到了

`[email protected] extraneous

结果，所以它已安装。

我希望有人能帮助我。

Answer 1

如果您使用的是 typescript 和 angular2，则只需安装 jquery 和 jquery-ui 的 typings。然后，您可以按如下方式加载 jQuery：

import "jquery-ui"
import * as $ from "jquery"

您似乎遇到的另一个问题是 jquery-ui 正在寻找 require ，而该浏览器本身并不存在。我会仔细检查您如何加载 jquery-ui，因为它也可能会引入错误

Answer 2

下面是我实现它的方法：

在主 HTML 文件中包括相应的 JS 文件

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

将 jquery().storable 包装到自定义指令中

@Directive({
selector: '[sortable]'
})
export class SortableDirective {
构造函数（私有 elementRef:ElementRef）{
}

ngOnInit() {
$(this.elementRef.nativeElement).sortable({
start: function(event, ui) {
console.log('start');
},
change: function(event, ui) {
console.log('change');
},
stop: function(event, ui) {
console.log('stop');
}
}).disableSelection();
}
}

这样使用

@Component({
selector: 'app',
template: `
<ul sortable>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
</ul>
`,
directives: [ SortableDirective ]
})
export class App implements AfterViewInit {
}

查看此 plunkr： https://plnkr.co/edit/gQnKzqdHCY82LOCFM1ym?p=preview 。

关于 require 问题，您可以从 SystemJS 加载 jquery-ui，因为它理解 require 函数。这是一个示例：

<script>
  System.config({
    map: {
      'jquery-ui': 'nodes_module/.../jquery-ui.js'
    }
  });
</script>

然后您可以通过这种方式导入它：

import jqueryui from 'jquery-ui';