Gustavo Bissolli Gustavo Bissolli - 5 months ago 429
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!

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


main.ts

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

@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

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

-----UPDATE-----

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": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}


Thanks in advance!

Answer

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.