错误：在 Angular 2 中加载外部模块时，require 不是函数答案

【问题标题】：Error: require is not a function while loading external module in Angular 2错误：在 Angular 2 中加载外部模块时，require 不是函数
【发布时间】：2016-02-29 22:42:48
【问题描述】：

ng2-dragula 看起来很酷，但我很难为我的 angular 2 项目设置它。我使用system.js作为模块预加载器，它的配置是：

System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-bootstrap': {},
      'ng2-dragula': { defaultExtension: 'js' }
    },
    map: {
      'dragula': 'node_modules/dragula',
      'ng2-bootstrap': 'node_modules/ng2-bootstrap',
      'ng2-dragula': 'node_modules/ng2-dragula',
      'moment': 'node_modules/moment/moment.js'
    }
});

我的tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "watch": true
  }
}

我将它加载到我的组件中，如下所示：

import {DragulaService, Dragula} from 'ng2-dragula/ng2-dragula'

@Component({
  selector: 'my-cmp',
  viewProviders: [DragulaService],
})


@View({
  template: '<div>Hey</div>',
  directives: [Dragula]
})

我做错了什么，所以在浏览器中出现以下错误：

Error: require is not a function(…) angular2-polyfills.js:1243

【问题讨论】：

标签： angular dragula

【解决方案1】：

您可能正在加载一些通过<script src="some-module.js"> 标签编译为commonjs 模块的脚本。您应该删除它们并使用 System.import("some-module.js") 代替。类似问题的解释见this answer。

【讨论】：