在angular2应用程序中集成ng2 select

Question

我正试图将angular2指令集成到我的项目中；ng2从这里选择，但我很难整合它。

在我的index.html文件中，我像这样配置Systemjs

System.config({
            map: {
                'ng2-select': 'node_modules/ng2-select'
            },
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                },
                'ng2-select': {
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/main').
        then(null, console.error.bind(console));

像这个一样在我的组件中导入

import {Select} from 'ng2-select/ng2-select';
@Component({
    selector: 'movie',
    templateUrl: 'templates/movie.html',
    directives: [Select, FORM_DIRECTIVES, NgClass]
})
exports class MovieComponent {}

运行它，我得到这个错误

angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <(…)ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482$ @ system-polyfills.src.js:1340H @ system-polyfills.src.js:1340R.when @ system-polyfills.src.js:1340T.run @ system-polyfills.src.js:1340t._drain @ system-polyfills.src.js:1340drain @ system-polyfills.src.js:1340e @ system-polyfills.src.js:1340

查看网络检查器，它显示模块的js文件已经加载，所以我不知道为什么我一直收到这个错误。

Answer 1

您不需要在packages块中为ng2-select定义条目。在map块中，就足够了：

System.config({
  map: {
    'ng2-select': 'node_modules/ng2-select'
  },
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    }/*,
    'ng2-select': { // <-----
      defaultExtension: 'js'
    }*/
  }
});

有关更多详细信息，请参阅此问题：

• 将bootstrap模块和ng2 select模块集成到angular2 5分钟快速启动

Answer 2

我在systemjs.config.js解决方案中配置：

var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'vendor/rxjs',
    '@angular':                   'vendor/@angular',
    'moment' :                    'https://npmcdn.com/moment@2.13.0',
    'ng2-bootstrap' :             'vendor/ng2-bootstrap',
    'ng2-select' :                'vendor/ng2-select'
}; 
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/testing',
'@angular/upgrade',
'ng2-bootstrap',
'ng2-select'
];

然后我导入到我的组件

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
import {SELECT_DIRECTIVES} from 'ng2-select/ng2-select';