System.js detailed

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.

Systemjs

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 (' https://code.jquery.com/jquery.js ');</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.app/Contents/MacOS/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

App/es6-file.js:

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

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