Ng2-select: Help! Unexpected token <(…)

[bissolli]

Hi guys! I am just starting with Angular 2 and I am getting a lot of pain trying to install this component but I don't know where is the problem!

Just installed through npm and included da CSS file on my index.html.

There is my Component:

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

@Component({
templateUrl: 'src/views/lead/lists.view.html',
directives: [Select],
})
export class LeadListsComponent {
team: string = "Ringo";
teams: string[] = ["John", "Paul", "George", "Ringo"];
}`

And I am facing this issue:

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:482ZoneTask.invoke @ angular2-polyfills.js:434 browser-sync-client.2.11.2.js:1 XHR finished loading: POST "http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=LE_vEJl&sid=HBaWZ-iVa8xKruebAAC6".Request.create @ browser-sync-client.2.11.2.js:1Request @ browser-sync-client.2.11.2.js:1XHR.request @ browser-sync-client.2.11.2.js:1XHR.doWrite @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:2proxy @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:2(anonymous function) @ browser-sync-client.2.11.2.js:2exports.encodePacket @ browser-sync-client.2.11.2.js:2encodeOne @ browser-sync-client.2.11.2.js:2eachWithIndex @ browser-sync-client.2.11.2.js:2map @ browser-sync-client.2.11.2.js:2exports.encodePayload @ browser-sync-client.2.11.2.js:2Polling.write @ browser-sync-client.2.11.2.js:1Transport.send @ browser-sync-client.2.11.2.js:1Socket.flush @ browser-sync-client.2.11.2.js:1Socket.sendPacket @ browser-sync-client.2.11.2.js:1Socket.write.Socket.send @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:3Encoder.encode @ browser-sync-client.2.11.2.js:3Manager.packet @ browser-sync-client.2.11.2.js:3Socket.packet @ browser-sync-client.2.11.2.js:3Socket.emit @ browser-sync-client.2.11.2.js:3(anonymous function) @ browser-sync-client.2.11.2.js:24Emitter.emit @ browser-sync-client.2.11.2.js:3Socket.onevent @ browser-sync-client.2.11.2.js:3Socket.onpacket @ browser-sync-client.2.11.2.js:3(anonymous function) @ browser-sync-client.2.11.2.js:3Emitter.emit @ browser-sync-client.2.11.2.js:3Manager.ondecoded @ browser-sync-client.2.11.2.js:2(anonymous function) @ browser-sync-client.2.11.2.js:3Emitter.emit @ browser-sync-client.2.11.2.js:2Decoder.add @ browser-sync-client.2.11.2.js:3Manager.ondata @ browser-sync-client.2.11.2.js:2(anonymous function) @ browser-sync-client.2.11.2.js:3Emitter.emit @ browser-sync-client.2.11.2.js:2Socket.onPacket @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:1Emitter.emit @ browser-sync-client.2.11.2.js:2Transport.onPacket @ browser-sync-client.2.11.2.js:1callback @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:2exports.decodePayloadAsBinary @ browser-sync-client.2.11.2.js:2exports.decodePayload @ browser-sync-client.2.11.2.js:2Polling.onData @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:1Emitter.emit @ browser-sync-client.2.11.2.js:2Request.onData @ browser-sync-client.2.11.2.js:1Request.onLoad @ browser-sync-client.2.11.2.js:1xhr.onreadystatechange @ browser-sync-client.2.11.2.js:1wrapFn @ angular2-polyfills.js:771ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431

Somebody have any clue?

[bissolli]

Better explained!
http://stackoverflow.com/questions/36274015/angular2-trouble-in-integrating-ng2-select

If somebody knows how to fix it!

[vmasek]

'<' in _Unexpected token <(…)_ is begining of a <!doctype HTML> html tag, it means that one of your imported/used scripts (in this case i bet on import {Select} from "ng2-select/ng2-select";) is probably not routed/provided and you are getting default response containing your app html document.
In issue #48 is described problem that leads to this and in #45 it is explained how to fix it. I was doing this fixes few days ago and it helped.

[noagr1]

I have the same problem I tried all the stuff mention in issues #45 and #48 but with no help.
What should be the problem?

[vmasek]

First step to find the solution is opening the console network tab and seek which of your requested scripts have been responded with default html response. When you find it, you'll know that it is eighter not provided (systemjs, gulp, ...) or bad import.

[WolvenOne27]

I ran into the same issue and was able to get it working.
I found this post on stack overflow for ng2-charts, but the same thing applied here.
I needed to both add 'ng2-select' as a package and map to it in the System.config for it to run correctly.

>         System.config({
>             baseURL: 'http://localhost:5531/',
>             packages: {
>                 app: {
>                     format: 'register',
>                     defaultExtension: 'js'
>                 },
>                 'ng2-select':{
>                     defaultExtension: 'js'
>                 }
>             },
>             map: {
>                 moment: 'node_modules/moment/moment.js',
>                 'ng2-select': 'node_modules/ng2-select'
>             },
>             meta: {
>                 '*.js': { scriptLoad: true }
>             }
>         })

[noagr]

Thanks a lot. It solved my problem