SystemJS typescript woes?

Question

I just can't seem to understand modules and paths. I'm writing a Chrome extension and trying to use typescript with angular2. I kinda got it working once, but I wanted to restructure my directories. It seems like every time I want to get a project setup or add files or pages I have this issue. Is there anywhere to go to learn the rules for locating modules and javascript/typescript files?

What I want to do is have a src folder with my html, css (or less/sass), and typescript files and a www folder with my html, css and compiled js files. I've setup my grunt tasks and they compile fine. Since I'm using Angular 2 and in an extension I can't have inline scripts, I have two separate scripts for each page I'm creating, a src/pages/index-page.ts script that has the System setup and is loaded directly from www/index.html with <script src="js/pages/index-page.js"></script>:

declare var System : any;

System.config({
  packages: {
    appScripts: {                    
      defaultExtension: 'js'
    }
  }
});

System.import('js/pages/index-boot')
  .then(null, console.error.bind(console));

And the src/pages/index-boot.ts script that it should load

import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {IndexApp} from './index-app';

bootstrap(IndexApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

Of course I get a network failure trying to load /www/js/pages/index-boot. If I add the js, then it loads that file, but then I get errors finding router and index-app.

Why is index-page trying to load index-boot in the browser without the extension? Do I need to organize my files differently? Is there a site somewhere to explain all of this? I don't get why I have to have three separate code files for one page (System config and import boot, boot, and app).

Amid · Accepted Answer · 2016-03-03 09:14:47Z

1

Why is index-page trying to load index-boot in the browser without the extension?

Because you have not asked it to do so. As far as I can see from your question there is no folder appScripts in your setup, and therefore defaultExtension: 'js' is simply ignored. To fix it an easy way use:

System.defaultJSExtensions = true;

See more here: defaultJSExtensions

This will get you started while you are learning how to setup packages in systemjs (packages), but note that this construct is deprecated.

As a starting point angular2 quickstart is a good place. Note their usage of package called "app" and compare it to their folder structure - note 'app' folder there.

SystemJS you have to setup once per your application (index-page.js). Not for every page. Then you need some place to bootstrap your angular2 app (index-boot.ts), and then the rest of your application (app.ts and everything else) containing business logic

answered Mar 3, 2016 at 9:14

Amid

22.5k6 gold badges63 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Goemaat Over a year ago

Is there a website somewhere to explain this? Is having the package named 'app' important? Does that correlate to a directory structure? Relative to the html or to the page? Can I use bundles like in the sample in their quickstart that way? Can I have multiple packages?

Amid Over a year ago

Start with readme of the systemjs on github. No name 'app' is not important - its just a name of the folder with your compiled js files. Its relative to the 'System.baseURL' see readme for more info. You can have as many packages as you want. Usually every 'library' you use is a package, like rxjs, director, whatever.

Ludohen · Accepted Answer · 2016-03-03 09:17:49Z

1

defaultJSExtensions will solve your extension issue.

System.config({
  defaultJSExtensions: true, // Will prepend .js to the module names
  paths: {
    '*': '/www/js/pages/*',  // If all your module are under /www/js/pages
    'angular2/*': '/path/to/angular2/*'
  },
  packages: {  // I don't see any appScripts package ref in your exemple, you can probably drop that one.
    appScripts: {                    
      defaultExtension: 'js'
    }
  }
});

With this config, you can then simply do System.import('index-boot')

answered Mar 3, 2016 at 9:17

Ludohen

8,5751 gold badge17 silver badges14 bronze badges

4 Comments

Jason Goemaat Over a year ago

is there a way to tell angular2 and rx to use the provided bundles?

Ludohen Over a year ago

If you want to use the bundles, you'll have to load them using script tag and placed before System.config. You can also checkout angular2-seed project (dev and prod build using System)

Jason Goemaat Over a year ago

So the package name needs to refer to a directory on the server, and that makes it it's own module? And that directory is specified by the property name in the packages object of the config object passed to System.config? How does that correspond to what is loaded by System.import? For instance if I have js/appScripts and do System.import('js/appScripts/page.js'), does the key have to be 'js/appScripts': {...}?

Ludohen Over a year ago

You shoud read this: github.com/systemjs/systemjs/blob/master/docs/…

Collectives™ on Stack Overflow

SystemJS typescript woes?

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related