CODEWITHSUNDEEP
javascriptangularjspm
cpeele00
cpeele00

Reputation: 893

Angular2 System.js can't find jspm packages

I'm trying to write a simple Angular2 (using Alpha 47) app and I am trying to install "npm guid" from jspm. It installs fine but when I try and run the app I always get "GET http://localhost:3001/jspm_packages/npm/[email protected] 404 (Not Found)". I've also tried to load other packages as well and they also come up with a 404. Otherwise my angular2 app works fine. I'm not sure what I am doing wrong. Any help would be really appreciated! Thanks!

System.js config file

System.config({
  baseURL: "/",
  transpiler: "none",
  paths: {
    "npm:*": "jspm_packages/npm/*",
    "github:*": "jspm_packages/github/*"
  },

  packages: {
    "app": {
      "defaultExtension": "js"
    }
  },

  map: {
    "guid": "npm:[email protected]"
  }
});

index.html

<html>
<head>
    <title>Office Contacts</title>
    <link rel="stylesheet" href="app/styles/foundation.css">
    <script src="jspm_packages/system.src.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="config.js"></script>
    <base href="/">
    <script>
        System.import('app/release/bootstrap');
    </script>

    <script src="node_modules/es6-shim/es6-shim.js"></script>
</head>
<body>
<app>Loading...</app>
</body>
</html>

My bootstrap.ts file

//
// ANGULAR PROVIDERS
//
import {bootstrap, provide, FORM_PROVIDERS} from 'angular2/angular2';
import {ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ContactsService} from './contacts.service';
import {guid} from 'guid';

//
// APP COMPONENT
// Top level component that holds all of our components
//
import {App} from './app';


//
// BOOTSTRAP
// Bootstrap our app with the top level component and
// inject services and providers
//
bootstrap(App, [
    FORM_PROVIDERS,
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    ContactsService,
    guid,
    provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

Upvotes: 0

Views: 1099

Answers (2)

Murhaf Sousli
Murhaf Sousli

Reputation: 13306

I see you only added "defaultExtension": "js" for app

something is wrong with the extension, have you tried to copy the link into your browser http://localhost:3001/jspm_packages/npm/[email protected], and then add .js to see if it loads.

try this

 System.config({
  map: { npm: 'jspm_packages/npm/' },
  packages: {
    npm: { defaultExtension: 'js' },
    'app': {defaultExtension: 'js'}
  }
});

Upvotes: 0

jordan.yana
jordan.yana

Reputation: 61

Are you using Alpha 53? If so: They got rid of 'angular2/angular2'. You have to import now using 'angular2/bootstrap', 'angular2/core'.

I'm actually having a potentially similar issue where 'angular2/bootstrap' isn't importing properly into SystemJS.

https://github.com/angular/angular/blob/master/CHANGELOG.md

Upvotes: 0

Related Questions