Question

我跟着Zach's Answer创建了新的VS 2015 .NET 5项目并使用Typescript运行Angular 2。看起来它的工作。但是有一点问题：

MyApp.ts：

import { Component } from "angular2/core";

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

当我更改模板时，键入一些不同的文本，让我们说<div>Some text here</div>，然后我重新编译项目并在浏览器中运行以查看更改 - 它仍然显示较旧的模板文本 - Hello from Angular 2 。所以我检查了MyApp.js（从MyApp.ts编译），也没有变化。

（我尝试多次构建项目，也关闭VS并重新打开它 - MyApp.ts只编译一次 - 第一次创建时。）

其他文件： （可能有助于解决）

tsconfig.json：

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

它来自哪个（问题）？角？打字稿？ VS 2015？从我的意见 - 必须是与Typescript及其编译的东西？有什么建议？

P.S： 此实现不适用于IE！

进度： 如果我清理 - 重建 - 构建我的项目 - 它编译.ts文件，但它与第一次编译相同 - 实际上不是溶液...

Answer 1

Visual Studio 2015的Angular 2模板及更新3

步骤： -

创建一个空的“.net核心或ASP.Net”项目。
项目结构将如下所示......

添加package.json文件＆amp;添加所有必需的依赖项。

的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"
  }
}

创建“scripts”文件夹，在这里您将拥有所有* .ts文件和tsconfig.json（所有* .js转换后的文件将移至“../ 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"
  ]
}

添加Gulp文件，该文件将把所有必需的文件从node_modules移动到wwwroot下的lib文件夹
创建index.html文件＆amp;从位于wwwroot下的lib文件夹中添加所有必需的文件引用。

如果您想手动安装所有软件包

npm install

注意：请安装Visual Studio 2015中与VS2015更新3和“DotNetCore.1.0.0.RC2-VS2015Tools.Preview1”相关的所有更新。然后，只有您才能运行此解决方案。

您可以从此处下载“Visual Studio 2015的Angular2模板及更新3”...

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

Answer 2

我正在使用tsconfig文件在visual studio中工作。对我来说，它在添加“compileOnSave”属性后工作，我的tsconfig看起来像这样：

android {
    defaultConfig {
        minSdkVersion 15
        targetSdkVersion 25
        multiDexEnabled true
    }
}

dependencies {
    compile 'com.android.support:multidex:1.0.1'
}

Answer 3

在visual studio中，转到选项 - ＆gt; typescript-＆GT;项目 - ＆GT;启用复选框 “自动编译不属于项目的打字稿文件”

和无线电领域 “将AMD代码生成用于不属于项目的模块”。

这应该为你生成新的J。

这里有一个类似的主题。请检查Type Script is not generating JavaScript in my Visual Studio Community edition 2015

使用Visual Studio 2015在Angular 2上编译的Typescript文件

3 个答案: