Issue integrating ng2-select in angular2 app

Question

Am trying to integrate an angular2 directive into my project; ng2-select from here, but am struggling to integrate it.

In my index.html file, i config Systemjs like this

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));

Importing in my component like this

import {Select} from 'ng2-select/ng2-select';

@Component({
    selector: 'movie',
    templateUrl: 'templates/movie.html',
    directives: [Select, FORM_DIRECTIVES, NgClass]
})

exports class MovieComponent {}

Running it and i get this error

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

Looking the network inspector, it shows that the js file for the module is loaded, so i dont know why i keep get this error.

http://stackoverflow.com/search?q=%5Bangular2%5D+ng2-select – Eric Martinez Apr 03 '16 at 13:20 — Eric Martinez, Apr 03 '16 at 13:20

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

You don't need to define an entry in the packages block for ng2-select. In the map block, it's enough:

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

See this question for more details:

integrate bootstrap module and ng2-select module to angular2 5min quickstart

edited May 23 '17 at 11:54

Community

1
1

answered Apr 03 '16 at 13:22

Thierry Templier

198,364
44
396
360

still no luck, same error when i import in my component – MrFoh Apr 03 '16 at 13:27

score 0 · Answer 2 · edited Jun 27 '16 at 20:17

I configured in systemjs.config.js solution:

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'
];

and then I imported to my component

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

Issue integrating ng2-select in angular2 app

2 Answers2