Error -> SyntaxError: Unexpected token <

[santiim]

Hello, I wanted to know if you could help me, every time I try to incorporate some external component or library, for example:

Throws an error, probe to implement it in another project and they work.

In the case of http://www.primefaces.org/primeng

The error is as follows:

zone.js:232 Error: (SystemJS) Unexpected token <
	SyntaxError: Unexpected token <
	Evaluating http://localhost:3000/primeng/primeng

In the case of https://github.com/JiriBalcar/angular2-datepicker

The error is as follows:

zone.js:232 Error: (SystemJS) Unexpected token <
	SyntaxError: Unexpected token <
	Evaluating http://localhost:3000/jb-input-datepicker

In the case of https://auth0.com/blog/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-betwee)n/)

The error is as follows:

localhost/:23 Error: (SystemJS) Unexpected token <
	SyntaxError: Unexpected token <
	Evaluating http://localhost:3000/angular2-jwt
	Error loading http://localhost:3000/app/main.js

And so with everything I probe, is there something I should do?

Thank you very much!

[moizKachwala]

Hi santiim,

There are couple of steps that you need to do for adding a new library support in the project.

1. do npm install PackageName --save
2. add entry in systemjs
3. Add entry in index.html to refer to the copied location.
4. Also check the gulpfile.js and add the entry if required.

If you face any issue then let me know.

[santiim]

Thanks moizKachwala for your answer! If I have done all the necessary steps, in other projects I have succeeded without problem, but in this I have not been able to achieve it, I try with several components and there was no case. I think it may be some particularity of this project. One simple to test is:
https://github.com/JiriBalcar/angular2-datepicker
With which I have not been able either.
Have you been able to incorporate any external components to this project?

[moizKachwala]

I tried D3 charts added in one of my angular project without any problem.

Which library are you trying to add here ? can you give some more details so that I can try adding in this project.

[santiim]

Hi moizKachwala! and solve the problem, To be able to use angular2-jwt, these were the steps:
In the file gulpfile.TS add the following line:

gulp.task("libs", () => {
    return gulp.src([
        'core-js/client/**',
        'zone.js/dist/zone.js',
        'reflect-metadata/Reflect.js',
        'reflect-metadata/Reflect.js.map',
        'systemjs/dist/system.src.js',
        'angular2-jwt/'

In the systemjs.conf.js:

  var map = {
    'app':                        'app', // 'dist',        
    '@angular':                   (isPublic)? '@angular' : 'node_modules/@angular',
    'rxjs':                       (isPublic)? 'rxjs' : 'node_modules/rxjs',
    'angular2-jwt':               '../libs/angular2-jwt/angular2-jwt.js'    
  };


  var packages = {    
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-jwt':               { defaultExtension: 'js' }
  };

Finally I run:

  Npm run build
Npm run deploy

So solve the problem, thank you very much for your patience!

[moizKachwala]

great :)