Angular 2 : trouble in integrating ng2-select

Question

我面临着非常棘手的问题，我希望有人能帮助我!我已经在这里发现了很多关于同一问题的问题，但我应用了找到的解决方案，但它仍然无法正常工作!

所以我在 Angular 2 中有一个应用程序，我正在尝试集成 ng2-select，但它返回了无聊的错误:

angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <

我知道每个人都在说我的 System.config 有问题，但我无法解决它!

这是我的代码!

System.config

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

ma​​in.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./components/app/app.component";

import 'ng2-select';
import 'ng2-bootstrap';

bootstrap(<any> AppComponent);

我的组件

import {Component} from 'angular2/core';
import {select} from "ng2-select";

@Component({
    templateUrl: 'src/views/lead/lists.view.html',
    directives: [select],
})
export class LeadListsComponent {
    team: string = "Ringo";
    teams: string[] = ["John", "Paul", "George", "Ringo"];
}

I have the files on the node_modules/ng2-angular properly I think! There is the print

但只有 TS 文件...可能是问题所在？我该怎么办？

-----更新-----

还有我的 tsconfig.json!

{
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

提前致谢!

Answer 1

如果您使用的是 ng2-select，那么情况会有所不同。您必须将 systemjs 配置更改为以下内容:

systemjs.config.js

map: {
   ...,

   'ng2-select': 'node_modules/ng2-select',

   ...
},
packages: {
  ....,
  'ng2-select': {main:'ng2-select.js', defaultExtension: 'js'}
}

在你的模块下面添加导入语句

import { SelectModule } from "ng2-select/ng2-select";

然后将“SelectModule”添加到 NgModule.imports 数组。

现在在您的组件中添加以下导入语句:

import { SelectComponent } from "ng2-select/ng2-select";