System.js detailed

Source: Internet
Author: User
Tags baseuri export class

These days the study typescript and angular 4 encountered many pits, code problems solved relatively fast, but to the flexible deployment of the time only to find a lot of pits. Before learning typescript and angular are reading plus, not being used in the actual above, so a period of time after forgetting, resulting in a lot of waste of time, but also to learn from the beginning, so later to learn to use, do not learn. Haha, not much nonsense to say, the following into the topic:

Angular Quick Start tutorial mainly contains 2 configuration files, one is Tsconfig.json, one is system.js. Tsconfig.json for the TypeScript compiler to specify how to convert TypeScript code to JavaScript files, TypeScript is a superset of JavaScript, details can be viewed on the official website. This document is mainly about the role of System.js.


Loading modules

SYSTEMJS is a configurable module loader that enables dynamic ES template loaders for browsers and Nodejs. Any URL that has a standard can be loaded as a module:

<script src= "System.js" ></script><script>  //load the URL relative to the current address  systemjs.import ('./ Local-module.js ');  Load the absolute URL address  systemjs.import (' ');</script>

Any type of module format can be loaded and automatically detected by SYSTEMJS.

File access Permissions

when running locally, make sure you are running from a local server or a browser with local XHR requests enabled. If it is not, you will receive an error message.

For Chrome on your Mac, you can run it:/Applications/Google\\ Chrome --allow-file-access-from-files &> /dev/null &

in Firefox, this requires navigating to about:config the , enter security.fileuri.strict_origin_policy Filter box and toggle the option to false.

Load ES6


Export Class Q {    constructor () {      this.es6 = ' yay ';    }  }
  <script>    systemjs.import ('./app/es6-file.js '). Then (function (m) {      console.log (new M.q (). es6);//Yay    });  </script>

  The ES6 module definition is named Export and provides a static constructor accessor.

configuration of the load period

Some standard configuration options and their use as described below.


BaseURL provides a mechanism for loading modules based on a relative address.

This allows the same module to be accessed from many different request URLs

Systemjs.config ({  baseURL: '/modules '});//Load/modules/jquery.jssystemjs.import (' jquery.js ');


the module names in the form above are relatively clear , and are always loaded relative to BaseURL, rather than relying on parenturl, which are like normal URLs.

When loading relative syntax, the module is not dependent on baseurl, but it is very related to BaseURI:

Load according to BaseURI instead of Baseurlsystemjs.import ('./x.js ');


System.js detailed

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.