Error using angular2-jwt

[Renato Balbino]

Hi!

I'm trying to use angular2-jwt in my app but when I try to build the project this error appears. I already have the angular2-jwt in my systemjs.config.js but nothing changes.

Any idea?

_Error_

λ npm run serve-build

> angular2-starter@1.0.0-rc.5 serve-build C:\Users\renat\Projects\Angular2\taskr
> gulp serve-build

============ Angular 2 Starter ============
Current environment: development
- Change environment via --env or NODE_ENV
- env.json is detected. 1 values loaded.
===========================================
[19:49:27] Using gulpfile ~\Projects\Angular2\taskr\gulpfile.js
[19:49:27] Starting 'build'...
[19:49:27] Starting 'clean-report'...
[19:49:27] Starting 'clean-ts'...
[19:49:27] Starting 'env'...
[19:49:27] Finished 'clean-report' after 20 ms
[19:49:27] src/app/shared/constant/env.ts is generated successfully
[19:49:27] Finished 'env' after 49 ms
[19:49:27] Finished 'clean-ts' after 59 ms
[19:49:27] Starting 'tsc'...
[19:49:33] Finished 'tsc' after 5.66 s
[19:49:33] Starting 'unit-test'...
31 08 2016 19:49:35.965:INFO [karma]: Karma v1.1.2 server started at http://localhost:9876/
31 08 2016 19:49:35.967:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
31 08 2016 19:49:35.976:INFO [launcher]: Starting browser PhantomJS
31 08 2016 19:49:37.725:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#VjPchZYUFPlpL5YUAAAA with id 96470933
31 08 2016 19:49:44.083:WARN [web-server]: 404: /base/node_modules/angular2-jwt/angular2-jwt.js
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9876/node_modules/angular2-jwt/angular2-jwt.js
Error loading http://localhost:9876/node_modules/angular2-jwt/angular2-jwt.js as "angular2-jwt/angular2-jwt" from http://localhost:9876/src/tmp/app/common/auth-guard.common.js

_systemjs.conf.js_

(function(global) {
    // ENV
    global.ENV = global.ENV || 'development';

    // map tells the System loader where to look for things
    var map = {
        'app': 'src/tmp/app',
        'test': 'src/tmp/test',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'angular2-jwt': 'node_modules/angular2-jwt',
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': {
            defaultExtension: 'js'
        },
        'test': {
            defaultExtension: 'js'
        },
        'rxjs': {
            defaultExtension: 'js'
        },
        'angular2-jwt': {
            defaultExtension: 'js'
        },
        'angular2-in-memory-web-api': {
            main: 'index.js',
            defaultExtension: 'js'
        },
    };

    // List npm packages here
    var npmPackages = [
        '@angular',
        'rxjs',
        'lodash'
    ];

    // Add package entries for packages that expose barrels using index.js
    var packageNames = [
        // App barrels
        'app/shared',

        // 3rd party barrels
        'lodash',
    ];

    // Add package entries for angular packages
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router'
    ];

    npmPackages.forEach(function (pkgName) {
        map[pkgName] = 'node_modules/' + pkgName;
    });

    packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    ngPackageNames.forEach(function(pkgName) {
        var main = global.ENV === 'testing' ? 'index.js' :
            'bundles/' + pkgName + '.umd.js';

        packages['@angular/'+pkgName] = { main: main, defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    };

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

[Antony Budianto]

• add 'angular2-jwt' to npmPackages

• map isn't needed for

  • 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
  • 'angular2-jwt': 'node_modules/angular2-jwt'

  because it'll registered via npmPackages array

try on serve-dev too

[Renato Balbino]

Ok. I did what you suggested.

Now serve-dev is working fine but serve-build still get the same error.

[Antony Budianto]

seems weird, it should work if it worked in dev because the bundling requires the same systemjs config file.
Maybe you can try some older systemjs version

[Antony Budianto]

also a reproducable will be helpful here 😃

[Antony Budianto]

Oh I know the main issue, please add your angular2-jwt in:
https://github.com/antonybudianto/angular2-starter/blob/master/config/test/karma.conf.js#L7

it's in FAQ too, just FYI
https://github.com/antonybudianto/angular2-starter/wiki/FAQ#adding-new-js-libraries-like-lodash-etc-from-npm

because karma need to know which files to be added during test and I can't glob them all because the memory won't be enough

of course the bundling should be no problem