Ng2-select: Right way to import ng2-select

[BenDevelopment]

What is the right way to import this module in a Angular2 project ?

Currently, I import the module this way:
app.module.ts

import { SelectModule } from '../node_modules/ng2-select/components/select.module.ts';
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        ...
        SelectModule, // ng2-select
    ],
....

But I have an error:

zone.js:1263 GET http://localhost:55976/traceur 404 (Not Found)
(index):31 Error: Error: XHR error (404 Not Found) loading http://localhost:55976/traceur(…)

What am I doing wrong?

[chris--jones]

I had a bit of trouble getting this working as well. Are you using systemjs?

If so add the following to systemjs.config.js:

map: {
 ...
 'ng2-select': 'node_modules/ng2-select'
}

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

Then in the component you want to use the control:

import { SelectComponent } from 'ng2-select';`
@Component({
    selector: 'main',
    template: `<div>
        <ng-select
                [multiple]="true"
                [items]="filterItems"
                (data)="setFilterSelection($event)"
                placeholder="Click or type to filter"></ng-select>
    </div>
})
export class MainComponent {
    private filterSelection: string[];
    public filterItems: string[] = ["alpha","beta","gamma"];
    public setFilterSelection(value: any): void {
        this.filterSelection = value;
    }
}

[georgebejan]

@BenDevelopment you are having that error because of this line:

import { SelectModule } from '../node_modules/ng2-select/components/select.module.ts';

replace it with

import {SelectModule} from "ng2-select";

and it should disappear.

[MRHarrison]

I hope we can add @georgebejan example to the docs.

[Olmer1st]

Hi,
What files should be copied with gulp to use it in production?

[adadgio]

There should be documentation in the getting started. Seems like its awefuly missing !