Ng2-select: Issues adding ng2-select to an Angular 2 project

[fabricioferreira]

I'm trying to add the ng2-select component to a project, but I'm getting the following error when running it on Chrome:

My project is structure as follows:

src/ui
|-node_modules
|-wwwroot
|--vendor
|---css
|---ng2-select

I have a gulp task that copies the ng2-select.css to the vendor/css folder, and the ng2-select.min.js to the vendor/ng2-select folder:

const source_path = {
    component: './node_modules/ng2-select/bundles/ng2-select.min.js',
    css: './node_modules/ng2-select/components/css/ng2-select.css'
};

const dest_path = {
    component: './wwwroot/vendor/ng2-select',
    css: './wwwroot/vendor/css'
};

module.exports.dep = function (gulp, plugins) {
    return function () {
        return plugins.del([dest_path.component, dest_path.css]);
    };
};

module.exports.task = function (gulp, plugins) {
    return function () {
        gulp.src(source_path.component).pipe(gulp.dest(dest_path.component));
        gulp.src(source_path.css).pipe(gulp.dest(dest_path.css));
    };
};

The wwwroot folder is, as the name suggests, the root folder of my website. On the Index.html I have references to both css and the ng2-select.min.js files, both in the HEAD section. The reference to systemjs.config.js is placed right after it, and contains the usual code to instruct for loading the Angular2 files. Besides that, I have added the following code:

packages['ng2-select'] = { format: 'register', defaultExtension: 'js' };
map['ng2-select'] = './vendor/ng2-select';

I've tried also without adding anything to the systemjs.config.js file, but the error changes to something a little bit different:

The closer I got from making this work was by adding the following to systemjs.config.js:

map['ng2-select'] = '';
map['ng2-select/ng2-select'] = '';

But then, when I navigate to the page where the ng2-select component is referenced, I get the following error:

Is there a way to identify what is happening? Not necessarily an easy one...

[fabricioferreira]

In order to make it work for now I've decided to copy all .js files from node_modules/ng2-select into my vendor folder, keeping the same folder structure.
By doing that, now I'm able to navigate to the component that uses the ng2-select input, but for some reason I'm unable to type into the control. It seems the ng2-select control is coming as disabled.

Is there anything else that needs to be done in order to make it to work? Do I need to import any other component to make it to work?

[superstarmcawesome]

I'd recommend using the angular 2 seed project from mgechev. implementation is pretty easy. and you don't need to care about gulp tasks....
just add
{src: 'ng2-select/components/css/ng2-select.css', inject: true},
to project.config.ts
and
'ng2-select': 'node_modules/ng2-select',
to seed.config.ts

answering your last question.. no! :)

[hhsadiq]

@bona1337 that's not a solution.

@fabricioferreira so did you find a way to make it work with angular-cli..?? I am having exactly same problem.

[fabricioferreira]

@hhsadiq I agree with you. That's not a solution, mainly when you want to use it in an existing Angular 2.0 application.
Answering to your question: no, I haven't found a way to solve that. I'm stuck on Angular RC1 because the current multi-select control I'm using is not compatible with the new Forms API (I'm currently using an adapted version of the chosen.js component for Angular 2). We should move to the RC4/5 over the next two weeks, so I will either fix chosen.js, or find a way to use the ng2-select component.

[hhsadiq]

@fabricioferreira I have found a way to make it work. I am using rc3. Here are files

src/system-config.js

/** Map relative paths to URLs. */
const map: any = {
  'ng2-select': 'vendor/ng2-select'
};

/** User packages configuration. */
const packages: any = {
  'ng2-select': {
    defaultExtension: 'js',
    main: 'ng2-select.js'
  }
};

angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'ng2-select/**/*.+(js|css)'
      ...
    ]
  });
};

index.html

<link rel="stylesheet" href="vendor/ng2-select/components/css/ng2-select.css">
</head>

[superdem]

Hi @hhsadiq i applied your instructions but it gives a different error like this;

Do you have any idea for this situation ?
Thank you

[hhsadiq]

@superdem can you check your vendors folder in dist? Does it has all js and css file of ng2-select

[superdem]

@hhsadiq Yes I checked it, I think this is the right folder;

Add lines to systemjs.config.js like this;

var map = {
    'ng2-select': 'node_modules/ng2-select'
 };
var packages = {
    'ng2-select': { defaultExtension: 'js', main: 'ng2-select.js' }
  };

I am using rc4 now, I have just upgrade it.
And also I don't use angular-cli so i don't have angular-cli-build.js. Is this a problem ?
If I must use CLI , is this right one "https://cli.angular.io/" ?

Thank you

[superdem]

@hhsadiq I fixed it, Thank you!
I deleted "FORM_DIRECTIVES" from component because @angular/forms is was deprecated in RC. 4.
Cheers!

[hhsadiq]

@superdem great 👍

[superdem]

If anyone wants to use ng2-select & ng2-bootstrap on Angular 2 RC. 4, you should apply this steps https://github.com/valor-software/ng2-bootstrap/issues/722#issuecomment-231993770

[varunnagarSeedoc]

I am also facing following error on including ng2-select in my component. please assist, as i am novice in angular.

[erik-ropez]

@varunnagarSeedoc, I had this with RC.5. Switching back to RC.4 worked well.

[varunnagarSeedoc]

Thanks @erik-ropez, switching back to RC.4 solved the issue.