In order to use SystemJS within our browser, we will need to include the system.js source file, and then run a configuration script for SystemJS, similar to our RequireConfig.js file. Our HTML page is as follows:
<html>
<head>
</head>
<body>
<script
src="./node_modules/systemjs/dist/system.js">
</script>
<script src="./SystemConfig.js"></script>
</body>
</html>
Here, we have included two script files. One for the system.js framework itself, and one for a file named SystemConfig.js. This SystemConfig.js file is generated from the following SystemConfig.ts file:
SystemJS.config({
packages : {
'lib' : { defaultExtension: 'js' }
}
});
SystemJS.import('app.js');
Our SystemJS configuration file starts with a call to the SystemJS.config function, and includes a configuration object. Within this object, we have only specified one property, named packages. This packages property specifies a lib property and, within this, a single property named defaultExtension : 'js'. SystemJS uses the packages property to specify options for each of our source directories, or packages. The lib property therefore relates to all files contained within the ./lib directory. The defaultExtension property tells SystemJS that all modules within the ./lib sub-directory have a default extension of .js.
This means that when SystemJS encounters a module import, such as import {Module1} from './lib/module1', it will append the default extension of '.js' to the module filename, and therefore load a file named './lib/module1.js'.
The second part of our SystemJS configuration file is a call to the SystemJS.import function, specifying the app.js file as the starting point for our application. Once SystemJS has loaded the app.js file, it will begin to parse our code for all other imported modules, and then load them for use. If we view the Network tab in our browser Developer Tools, we will see the following files loading:
Note that with both AMD modules, and SystemJS modules, the Chrome browser assumes that these are being served from a running web server. If you attempt to load a page from disk, that is, hit Ctrl+O from Chrome, and navigate to your file on disk, you will receive a number of errors, as shown in the following screenshot:
Other browsers, such as Firefox, do not show these errors. Chrome does, however, supply a command-line option that allows this behavior, --allow-file-access-from-files. Alternatively, in order to load a page that uses SystemJS, simply run http-server from the root directory of your project, and then browse to the URL shown on the console. When http-server starts, it will show the IP address and port you should point your browser to, as follows:
Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.1.101:8080