Gustavo Bissolli Gustavo Bissolli - 1 year ago 871
Javascript Question

Angular2 : trouble in integrating ng2-select

I am facing really tough problem and I hope anybody can help me! I already find a lot of question here about the same problem but I applied what found as solution but it is still not working!

So I have a application in Angular 2 and I am trying to integrate the ng2-select and it's returning the boring error:

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

I know everybody is telling that it's a problem with my System.config but I can't solve it!

So there is my code!


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


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

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

bootstrap(<any> AppComponent);

my Component

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

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

But there is only TS files... could be that the problem? What should I do?


There is my tsconfig.json as well!

"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
"exclude": [

Thanks in advance!

Answer Source

I think your problem is when you do an import for select your name is wrong:

In MyComponent you should be pulling it in like this:

import {Select} from "ng2-select";

Where the S in select is capitalized. Usually when you get a:

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

It means a 404 error, that your module did not load correctly. But ng2-select exports Select and not select.

You may also have to do:

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

I am not 100% sure how npm loads it into your node modules directory as I have not used it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download