Angular 4 - 配置 systemjs

Question

我在我的项目中使用 systemjs as a module loader for the first time. I am also trying to use ng2-drag-drop plugin。安装后，我将模块导入到我想使用它的模型中，在我的例子中是 PostModule。

import { Ng2DragDropModule } from 'ng2-drag-drop';

@NgModule({
  imports: [PostRoutingModule, SharedModule, Ng2DragDropModule],
  declarations: [PostComponent],
  exports: [PostComponent],
  providers: [PostService]
})
export class PostModule { }

正如文档中所说，我更改了 systemjs 配置文件：

declare var System: SystemJSLoader.System;

System.config(JSON.parse('<%= SYSTEM_CONFIG_DEV %>'));
System.config({
    map: {
        'ng2-drag-drop': 'node_modules/ng2-drag-drop'
    },
    packages: {
        'ng2-drag-drop':  { main: 'index.js',  defaultExtension: 'js' },
    }
});

但是，我得到一个错误：

GET http://localhost:5555/node_modules/node_modules/ng2-drag-drop/index.js 404 (Not Found) (anonymous) (SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/node_modules/ng2-drag-drop/index.js

Answer 1

配置方法如下：

System.config({
    paths: {
        'npm:': '/node_modules/'
    },

    map: {
        'ng2-drag-drop': 'npm:ng2-drag-drop'
    },

    packages: {
        'ng2-drag-drop': {
            main: 'index.js',
            defaultExtension: 'js'
        }

    }

Angular 4 - 配置 systemjs

Angular 4 - configuring systemjs

plugins

ecmascript-5

systemjs

es6-module-loader

angular