CODEWITHSUNDEEP
angulartypescript
Gustavo Bissolli
Gustavo Bissolli

Reputation: 1571

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!

Upvotes: 3

Views: 5204

Answers (4)

Tee-Jay
Tee-Jay

Reputation: 733

If you are using ng2-select, Well things have changed a bit. You have to change your systemjs configuration to below:

systemjs.config.js

map: {
   ...,

   'ng2-select': 'node_modules/ng2-select',

   ...
},
packages: {
  ....,
  'ng2-select': {main:'ng2-select.js', defaultExtension: 'js'}
}

add import statement below in your Module

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

then add "SelectModule" to the NgModule.imports array.

Now in your component add the following import statement:

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

Upvotes: 3

alextsil
alextsil

Reputation: 554

What worked for me is the following

in systemjs.config.js:

inside map add : 'ng2-select': 'node_modules/ng2-select'

inside packages add : 'ng2-select': {main:'ng2-select.js', defaultExtension: 'js'}

then import like this: import {SELECT_DIRECTIVES} from "ng2-select";

Upvotes: 1

mma
mma

Reputation: 9

import { SELECT_DIRECTIVES } from 'ng2-select';

Upvotes: -1

Morgan G
Morgan G

Reputation: 3109

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.

Upvotes: 2

Related Questions