CODEWITHSUNDEEP
angularsystemjs
Jason Goemaat
Jason Goemaat

Reputation: 29194

Making SystemJS use angular2 bundle?

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.

  1. If I don't include the path '*' to where my code is, I get a 'require is not defined' trying to run the scripts.

  2. 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

Upvotes: 2

Views: 3021

Answers (3)

Thierry Templier
Thierry Templier

Reputation: 202138

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',
    }
  }
});

Upvotes: 0

Jason Goemaat
Jason Goemaat

Reputation: 29194

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:

Upvotes: 1

Sasxa
Sasxa

Reputation: 41254

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.

Upvotes: 2

Related Questions