Starting with ASP.NET 5, TypeScript 1.7 and the ES6 module syntax compiled to ES5.

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

 

image

 

Add "module": "system", under compileroptions:

 

image

 

Add two typescript files:

  • wwwroot/core/app.ts
  • wwwroot/libraries/list/findIndexByItem.ts

image

 

 

 

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

 

image

 

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” } .

 

image

 

Now we can install the system.js bower package:

 

image

 

 

findIndexByItem.ts

 

image

 

 

app.ts

 

image

 

 

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.

 

 

image

 

Result

 

image

 

 

Note: for browsers that do not support promises you need a promise polyfill, that can be found, here: https://github.com/jakearchibald/es6-promise/

Leave a Reply

Your email address will not be published. Required fields are marked *