3

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

Community
  • 1
  • 1
  • Have you tried force-reload Ctrl+r or Ctrl+F5 (don't use IE) in your browser? – Günter Zöchbauer Apr 22 '16 at 10:50
  • Yes i tried - no affect. Actually this implementation do not run on IE at all. – Ceylan Mumun Kocabaş Apr 22 '16 at 10:56
  • 1
    @CeylanMumunKocabaş Due to Angular's caching... I've found that I need to actually delete the browser cache from time to time to force the templates to update. Also, I would check the .js (and .ts) files in the browser debugger (e.g. Chrome dev tools) to make sure they are the updated ones. – Zach Apr 26 '16 at 15:41

3 Answers3

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
  }
}
Luis Lopez
  • 561
  • 1
  • 10
  • 29
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...

enter image description here

  • 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

Narottam Goyal
  • 3,534
  • 27
  • 26
  • This answer is not resolving the actual problem of mine, but i am accepting it because it might be useful and it seems to be the right approach instead of setting up manually. – Ceylan Mumun Kocabaş Oct 21 '16 at 09:34
0

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

Community
  • 1
  • 1
Tanima
  • 51
  • 5
  • It was `Use system code generation...` , I changed it to `Use AMD code generation..` but its the same story - not working. – Ceylan Mumun Kocabaş Apr 22 '16 at 12:22
  • yes it works, but i can not run a command line for every .ts file in my project when i want to see my project on the browser. – Ceylan Mumun Kocabaş Apr 25 '16 at 09:17
  • Hey can you try installing web essentials for VS(whichever version you are using). Then go to tools-> options-> web essentials-> typescript-> compile on save. Then you are done. So every time you save your ts, js will automatically get generated. – Tanima Apr 26 '16 at 07:06
  • 2
    My example and the examples on the Angular 2 page use SystemJS for their module loading so @CeylanMumunKocabaş should be using system for his module as well. Also, if you run tsc from command prompt, be sure you check the version `tsc -version` to ensure it's version 1.7 or higher. I've found that the path environment variable points to a lower version first and doesn't get replaced with a higher version. – Zach Apr 26 '16 at 15:50
  • I had the same probleem, solved it by MANUALLY updating "tsc -version" :http://stackoverflow.com/questions/39021808/vs2015-adding-watch-true-to-tsconfig-json-causing-jserrorscriptexception-0x/39022452#39022452 – Dudi Aug 18 '16 at 21:56