CODEWITHSUNDEEP
angularsystemjs
csyperski
csyperski

Reputation: 1032

Angular2 - SystemJS 404 when loading mapped modules

I am working in my first Angular2 project everything was working fine with it until I attempted to move from the browser transpiling TS to transpiling as part of the build cycle. So now I get everything to transpile to es5, but I am missing something with systemjs as I am getting 404 errors on anything that I have mapped in my System.config, specifically angular2-jwt, here is my config.js

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

Here is my entry point, main.ts

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {AuthHttp, AuthConfig} from 'angular2-jwt';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy,     APP_BASE_HREF} from 'angular2/router';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {ToastyService, ToastyConfig, Toasty} from 'ng2-toasty/ng2-toasty';

import {ApplicationComponent} from './components/application/application.component';

import {MenuService} from './services/menu/menu-service';
import {MessageService} from './services/messages/message-service';

bootstrap(ApplicationComponent, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
ToastyService, 
ToastyConfig,
MessageService,
MenuService,
provide(AuthHttp, {
useFactory: (http) => {
  return new AuthHttp(new AuthConfig(), http);
},
deps: [Http]
}),
 provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

When I attempt to load the app, now I get...

angular2-polyfills.js:126 GET http://localhost:8080/angular2-jwt 404 (Not Found)

So the browser is attempting to load the file from my import statement path of 

import {AuthHttp, AuthConfig} from 'angular2-jwt';

instead of the mapped path of:

 map: {
        "angular2-jwt": "node_modules/angular2-jwt/angular2-jwt.js"
    },

in my config.js.

What am I missing here? How do I get the browser to pull angular2-jwt from the full path of in node_modules? Thanks!

Upvotes: 3

Views: 1847

Answers (1)

Abdulrahman Alsoghayer
Abdulrahman Alsoghayer

Reputation: 16540

map should be a sibling of packages

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

Otherwise, the rest looks good to me.

Upvotes: 0

Related Questions