Initial Configuration - Let It Run!

[DerekJi2]

Refer to the link below: http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/

Configure .NET MVC5 with Angular2 + Typescript

Basically, it is a really good tutorial, but some details have been changed or not mentioned. We have to figure them out!

[DerekJi2]

KEY POINT ~1: typings.json

The versions in typings.json provided by the URL might not be correct/up-to-date.

We have to check current available versions with the command:

> typings info dt~jasmine --versions

And copy one of the available tags into typings.json { "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160914114559", "jasmine": "registry:dt/jasmine#2.5.0+20161025102649", "node": "registry:dt/node#6.0.0+20161121110008" } }

[DerekJi2]

KEY POINT ~2: package.json

Add the following lines into "dependencies":

[DerekJi2]

KEY POINT ~3: Typescript in VS2015

By default, the version might be 1.8 (or 1.x) and it's too old.

The latest version can be downloaded from this link: http://www.microsoft.com/en-us/download/details.aspx?id=48593

The typescript version on VS2015 can be checked by:

1. Right click on the project node in Solution Explorer
2. Click Properties
3. Go to the TypeScript Build tab
4. Change TypeScript version to the desired version or "use latest available" to always default to the newest version installed

Notice:

[DerekJi2]

KEY POINT ~4: _Layout.cshtml

To solve the problem like: Uncaught ReferenceError: System is not defined

Update the including lines in _Layout.cshtml as below

<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>

[DerekJi2]

KEY POINT ~5: systemjs.config.js

First of all, make sure this file is placed into /Scripts folder

Since the files are not placed into /libs/, it has to be updated

change this line: System.config({ paths: { // paths serve as alias 'npm:': '/libs/' },

as System.config({ paths: { // paths serve as alias 'npm:': '/node_modules/' },

Saying, just update '/libs/' to '/node_modules/'

[DerekJi2]

KEY POINT ~6: jQuery Support

> typings info dt~jquery --versions

update typings.json and add one line: "jquery": "registry:dt/jquery#1.10.0+20160929162922",

> typings install

After executed successfully, check the folder of /typings/ and find out available jquery's *.d.ts

In app.ts, add one line on the top

[DerekJi2]

Download & Run!

Based on the commit: 82ff598