Typescript files not compiling on Angular 2 with V

Question

I followed Zach's Answer and create new VS 2015 .NET 5 project and run Angular 2 with Typescript. It looks like its working. But there is a little problem:

MyApp.ts :

import { Component } from "angular2/core";

@Component({
    selector: "my-app",
    template: `
        <div>Hello from Angular 2</div>
    `
})
export class MyApp {
    public constructor() {
    }
}

When i change the template, type some different text, lets say <div>Some text here</div> , and then i recompile the project and run in browser to see the change - it still shows the older template text - Hello from Angular 2. So i checked in the MyApp.js (compiled from the MyApp.ts), and there is no change also.

(I tried building the project multiple times, also close VS and reopen it - MyApp.ts is compiled only once - the first time when its created.)

Additional files: (that may help solving)

tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

Where it comes from (the problem)? Angular? Typescript? VS 2015? From my opinion - must be something with Typescript and its compilation? Any suggestions?

P.S: this implementation do not work on IE!

Progress: if i clean - rebuild - build my project - it compiles the .ts files, but its the same thing as the first time compilation - not actually a solution...

Answer 1

Angular 2 Template for Visual Studio 2015 with update 3

Steps:-

• Create a empty ".net core or ASP.Net" project.
• Project Structure will look like this...

• Add package.json file & add all the required dependencies.

package.json

{
  "version": "0.0.1",
  "name": "vs2015-angular2-template",
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "systemjs": "^0.19.27",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "^0.6.12",
    "bootstrap": "^3.3.6",
    "jquery": "^2.2.3"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2"
  }
}

• Create "scripts" folder, here you will have all your *.ts files and tsconfig.json (all the *.js converted files will moved to "../wwwroot/appScripts/")

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../wwwroot/appScripts/",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",    
    "inlineSources": true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

• Add Gulp file which will take care of moving all the required files from node_modules to lib folder under wwwroot
• Create index.html file & add all the required file reference from lib folder which is under wwwroot.

If you want to manually install all the packages

npm install

Note: Please install all the Updates from visual studio 2015 related to VS2015 update 3 and "DotNetCore.1.0.0.RC2-VS2015Tools.Preview1". Then only you will be able to run this Solution.

---

You can download "Angular2 Template for Visual Studio 2015 with update 3" from here...

https://github.com/narottamgoyal/Vs2015Angular2Template.git

Answer 2

I'm working in visual studio with a tsconfig file. For me, it works after add "compileOnSave" attribute, my tsconfig looks like this:

{
  "compileOnSave": true,    <---- Added this line 
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

Answer 3

In visual studio, go to options-> typescript-> project-> enable the checkbox "Automatically compile typescript files that are not a part of project"

And the radio field "Use AMD code generation for modules that are not part of the project".

This should generate new Js for you.

There is a similar thread here. Please check, Type Script is not generating JavaScript in my Visual Studio Community edition 2015