Making SystemJS use angular2 bundle?

Question

I'm trying to use angular2 in a Chrome extension and it isn't recognizing that I've loaded the angular2 bundle. Here's my script tags in the file /www/popup.html:

<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/es6-shim.min.js"></script>
<script src="lib/js/system-polyfills.js"></script>
<script src="lib/js/angular2-polyfills.js"></script>
<script src="lib/js/system.src.js"></script>

<!-- bundles should be used -->
<script src="lib/js/Rx.js"></script>
<script src="lib/js/angular2.dev.js"></script>
<script src="lib/js/router.dev.js"></script>

<script src="app/pages/popup-page.js"></script>

In /www/app/pages/popup-page.js it will work if I setup the paths to the angular2 and rxjs source:

System.config({
  defaultJSExtensions: true, // Will prepend .js to the module names

  paths: {
    'angular2/*': '/node_modules/angular2/*', // finds
    'rxjs/*': '/node_modules/rxjs/*',         // finds
    '*': '/www/app/*'
  },
  packages: {
    "app": {
      format: 'register',
      defaultExtension: 'js',
    }
  }
});

But I don't want to have it load each of those javascript files individually, or even include them in my extension. It looks like those bundles should register themselves when the scripts load.

If I don't include the path '*' to where my code is, I get a 'require is not defined' trying to run the scripts.
If I don't include the paths to angular2 and rxjs, I get the browser trying to load '/www/app/angular2/...' for each import instead of using the bundles

Sasxa · Accepted Answer · 2016-03-04 22:33:17Z

2

If you load a bundle that has modules registered as system modules via <script> tag, you don't need anything else in System.config - it will resolve imports by registered names from memory.

By including <script src="lib/js/angular2.dev.js"></script> in your html file import statements like import {Component} from 'angular2/core' will work without any additional config.

Removing path options from System.config should resolve issue with angular imports. ('*': '/www/app/*' - this line basically maps everything to /www/app folder...).

To setup the paths for your own scripts use map option in System.config.package["app"], more info here.

edited Mar 4, 2016 at 22:33

answered Mar 4, 2016 at 21:56

Sasxa

41.4k17 gold badges90 silver badges102 bronze badges

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

2 Comments

Jason Goemaat Over a year ago

popup-page is not a module though I've written it in typescript. It doesn't have any imports, it just calls System.config and then calls System.import('./app/pages/popup-boot'). The examples I've seen have this code as an inline script in the html, but chrome extensions prohibit inline scripts so I made it a separate script and include it with a script tag. popup-boot has the first statement import {provide} from 'angular2/core';, and I'm getting a 404 error with that trying to find `/www/app/angular2/core.js', so it is not recognizing the bundles for some reason.

Sasxa Over a year ago

I misunderstood how you use popup-page.js.. Try removing path config (this should resolve angular imports issue). Then try adding map for app package. something like map: { app: "/www/app" }.. to map imports for your app files to the folder where they are.

Jason Goemaat · Accepted Answer · 2016-03-04 22:40:22Z

1

The problem I think was defaultJSExtensions. If I just change my System.config to this it works:

System.config({
  packages: {
    "app": {
      defaultExtension: 'js',
    }
  }
});

I just don't know of any place with documentation on what all these options are. I've looked at these pages (and many more I didn't save links for) and not been able to find a reference or good explanation of what all the options are and do:

systemjs site
- links to paths implementation which is useless
- links to ecma draft which has section 15.2 that is a nice reference for ES2015 modules, but not systemjs config

answered Mar 4, 2016 at 22:40

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

Comments

Thierry Templier · Accepted Answer · 2016-03-05 07:45:18Z

0

You only need to map "app" and not "*", as described below:

System.config({
  defaultJSExtensions: true, // Will prepend .js to the module names

  paths: {
    'angular2/*': '/node_modules/angular2/*', // finds
    'rxjs/*': '/node_modules/rxjs/*',         // finds
    'app': '/www/app' // <------
  },
  packages: {
    "app": {
      format: 'register',
      defaultExtension: 'js',
    }
  }
});

answered Mar 5, 2016 at 7:45

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Collectives™ on Stack Overflow

Making SystemJS use angular2 bundle?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related