In the previous post I described how you can get started with ASP.NET 5.
The code used in this blog post can be found at: https://github.com/roelvanlisdonk/Research/tree/master/Blog/ASP.NET5/TypeScriptES6Modules
In this post I will describe how you can get start using TypeScript 1.7 and the ES6 module syntax to order your code in an ASP.NET 5 application.
I will explain how you can use a “library” module inside your app code, by using TypeScript and the ES6 module syntax.
The compiled code will be in ES5, so we need a library called “system.js” to load the “ES6 modules” at runtime.
- After you followed the steps in the previous post
- Add a TypeScript JSON Configuration File to the wwwroot folder
Add "module": "system", under compileroptions:
Add two typescript files:
- wwwroot/core/app.ts
- wwwroot/libraries/list/findIndexByItem.ts
- Add the system.js bower package.
This is needed, because the typescript will be compiled into javascript modules.
These modules are in the “system.require” format.
We could use other module formats (see tsconfig.json), but in this example I wanted to use system.js
Before we can add the system.js bower package, add a “Bower Configuration File” to the root of the project.
In this example I use the folder “wwwroot/libraries” to store all my runtime JavaScript dependencies, so we have to edit the .bowerrc file, change:{ “directory”: “wwwroot/lib” } to { “directory”: “wwwroot/libraries” } .
Now we can install the system.js bower package:
findIndexByItem.ts
app.ts
index.html
The only javascript file we directly load in the index.html is “/libraries/system.js/dist/system.js”. All other logic will be dynamically loaded by the system.js loader.
To make system.js recognize file paths like System.register(["../libraries/list/findIndexByItem"] , so without the “*.js” extension, we need to add a little configuration by using System.config, then we load the “core/app.js” file and start the application.
The “core/app.js” uses the library module “findIndexByItem.js”. This JavaScript file will be dynamically loaded, when “core/app.js” is requested.
Result
Note: for browsers that do not support promises you need a promise polyfill, that can be found, here: https://github.com/jakearchibald/es6-promise/