Angular2-jwt: Newbie Import Issue

[timothyblue]

I added "angular2-jwt": "0.1.9" to the dependencies section of my package.json file.
Then I ran npm install
I now have the angular2-jwt library in my node_modules folder.

I import the library into my app.component.ts with this line: import {AuthHttp, AuthConfig} from 'angular2-jwt'; which seems to work correctly. The issue comes when I try to actually use the library.

This is my app.component.ts constructor

constructor(public authHttp: AuthHttp) { }

Once I do this my application stops working and I get the following error in my command window:
16.04.06 12:51:41 404 GET /angular2-jwt

This is the error I get in my F12 tools window:
Failed to load resource: the server responded with a status of 404 (Not Found) angular2-polyfills.js:332
Error: Error: XHR error (404 Not Found) loading http://localhost:3000/angular2-jwt(…)
ZoneDelegate.invoke @ angular2-polyfills.js:332

It appears that the system is attempting to find a file called angular2-jwt in my root directory instead of dynamically loading it from the node_modules folder.

I have had this sort of issue before and have gotten it to go away but I can't figure out how.

[chenkie]

What are you using for a build system? SystemJS? Can you paste your config here?

[timothyblue]

Here is where my ignorance starts to show.

Yes, I am using SystemJS "systemjs": "0.19.24"

   <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

I use this script in my package.json file which I got from the Angular2 quick start tutorial:
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "

I start it at the command promt with npm start

Do I need something more?

[chenkie]

Cool, i just took a look at the Angular2 quick start and it's SystemJS :)

You'll need to modify your System.config which is found in index.html.

This is the config typically used in a SystemJS setup for angular2-jwt

System.config({
  defaultJSExtensions: true,
  packages: {
    "angular2-jwt": {
      "defaultExtension": "js"
    }
  },
  map: {
    "angular2-jwt": "node_modules/angular2-jwt/angular2-jwt"
  }
});

You'll need to include the app package listed in the System.config from the quick start as well.

You can take a look here for an angular2-jwt SystemJS sample.

[timothyblue]

If I add the line defaultJSExtensions: true, then the system can no longer find the core libraries:

GET http://localhost:3000/angular2/core.js 404 (Not Found)
GET http://localhost:3000/angular2/platform/browser.js 404 (Not Found)
GET http://localhost:3000/angular2/http.js 404 (Not Found)

Without that line I get the folowing:
GET http://localhost:3000/node_modules/angular2-jwt/angular2-jwt 404 (Not Found)

This seems to be because it isn't looking for .js as the extension. If I add .js to the map it works but this doesn't seem correct? I tried the defaultExtension directive with and without quotes and saw no difference in the behavior.

Here is my config file "working"

System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {        
            app: {
                format: 'register',
                defaultExtension: 'js'
            },
            'angular2-jwt': {
                defaultExtension: 'js'
            }
        },
        map: {
            'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js'
        }
      });

[escardin]

Don't compile typescript in the browser, it makes your initial app load slower for your users and you have to redistribute another rather large library.

you don't need the defaultJSExensions: true.

[chenkie]

@timothyblue not sure if it will be helpful or not, but here's an example of applying auth to the Tour of Heroes app: https://github.com/auth0-blog/angular2-tour-of-heroes

Hopefully that will help with the SystemJS issues.

[bokc]

I take long time to run the import. So I hope it can help:

        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    },
                    "angular2-jwt": {
                        "defaultExtension": "js"
                    }
                },
                map: {
                    "angular2-jwt": "lib/angular2-jwt"
                }
            });
            System.import('app/main.js').then(null, console.error.bind(console));
        </script>

[clitorio]

have the same problem but i was able to solve the issue by adding .js

var map = {
'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js',
};

[AstaraelWeeper]

I'm having the same issue.
I'm not building the tutorial, and I'm using VS2015.
I have done like OP - installed the package from the package manager using npm, been able to import it into components, and yet I get a 404 error on running the application:
Failed to load resource: the server responded with a status of 404 (Not Found): http://localhost:58054/angular2-jwt.js.

i've tried adding to system-config as recommended (adding to map: 'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js' (with and without the .js), and to packages 'angular2-jwt': { defaultExtension: 'js' } following the pattern of the other instaleld modules).
I've also tried adding to package.json and restoring. It definitely looks installed but it's still trying to load as a local url.

Any more help?

[AstaraelWeeper]

update, the system-config wasn't set up right (as per the rest of the application, anyway) It now has paths to the npm URLs in map rather than node packages. this worked (in map):

'angular2-jwt': 'https://npmcdn.com/[email protected]/angular2-jwt.js',
'angular2': 'https://npmcdn.com/angular2'