无法在Plunker中正常运行ng2-dragula的问题求助

我之前也碰到过类似的SystemJS路径解析坑，你的问题核心是SystemJS没有正确识别dragula包内部的相对导入——当dragula试图加载./classes时，它错误地去全局packages里找外部的classes包，而不是从dragula自己的目录下加载。

下面是具体的解决方案：

步骤1：修正SystemJS的map和packages配置 #

你需要调整map和packages部分，明确告诉SystemJS如何解析dragula和ng2-dragula的内部模块，同时移除那些不必要的手动依赖映射（dragula的npm包已经包含了contra、crossvent等依赖，SystemJS会自动处理）。

修改后的config.js关键部分如下：

var angularVersion; 
if (window.AngularVersionForThisPlunker === 'latest'){ 
  angularVersion = ''; 
} else { 
  angularVersion = '@5.2.11'; 
} 

System.config({
  transpiler: 'typescript',
  typescriptOptions: { emitDecoratorMetadata: true },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {
    'app': './src',
    // Angular packages 保持你原来的配置不变
    '@angular/core': 'npm:@angular/core' + angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs@5.5.10/',
    'rxjs/operators': 'npm:rxjs@5.5.10/operators.js',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
    // 修改dragula和ng2-dragula的映射，指定兼容版本
    'dragula': 'npm:dragula@3.7.2',
    'ng2-dragula': 'npm:ng2-dragula@2.1.1/bundles/ng2-dragula.umd.js'
  },
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    'rxjs': {
      defaultExtension: 'js'
    },
    // 添加dragula的包配置，让内部相对路径正确解析
    'dragula': {
      main: './dist/dragula.js',
      defaultExtension: 'js',
      meta: {
        './dist/*.js': {
          format: 'cjs'
        }
      }
    }
  }
});

步骤2：关键修改说明 #

• 指定兼容版本：ng2-dragula@2.1.1是专门适配Angular 5的版本，避免版本不兼容问题；dragula@3.7.2是ng2-dragula@2.1.1依赖的稳定版本。
• dragula包配置：通过packages里的dragula配置，告诉SystemJS它的入口文件是dist/dragula.js，并且内部的JS文件都是CommonJS格式。这样当dragula内部引用./classes时，SystemJS会自动从dragula/dist/classes.js加载，而不是去找全局的classes包。
• 移除不必要的映射：你之前手动添加的contra、crossvent等依赖，dragula的npm包已经包含了这些，SystemJS会自动从dragula的node_modules目录加载，不需要手动map。

步骤3：验证修改 #

保存修改后的config.js，重启Plunker的预览，应该就能解决./classes找不到的问题，ng2-dragula也能正常初始化了。

内容的提问来源于stack exchange，提问作者Kevin Lee