起始Angular2上的Visual Studio 2015年一期工程 [英] Starting a project on Visual Studio 2015 for Angular2

问题描述

我用计算器extesively弄清楚如何获得Angular2在Visual Studio 2015年工作的亲。没有真正的答案，但这里是我发现的工作。
我已经看到了一堆和我的意思是如何获得的Visual Studio 2015年临工与Angular2项目一堆说明和示例。现在，这得到与使用Visual Studio社区或使用任何其他编辑器的所有指令有点混乱。下面是我用我自己的试验，有也是一个不错的书的主题是角2开发与打字稿的雅科夫费恩和安东莫伊谢耶夫开始时出现。从曼宁出版物。反正这是我的一个项目基本设置。

I used stackoverflow extesively to figure out how to get Angular2 working in Visual Studio 2015 pro. No real answers but here is what I found that worked. I have seen a bunch and I mean a bunch of instructions and examples for how to get Visual Studio 2015 Pro working with an Angular2 project. Now this gets a little confusing with all the instructions using Visual Studio Community or use any other editor. Here is what I have found using my own experimenting and also the beginning of a good book on the subject "Angular 2 Development with Typescript" by Yakov Fain and Anton Moiseev. Available from Manning publications. Anyway here is my basic setup for a project.

首先安装的NodeJS，这样你就可以用它为你的包管理器。不要惹过的NuGet这样做，只是安装Windows安装包从网站。我也没有尝试另一个pakcage经理，但我觉得节点都具有最新的软件包。接下来，您可以运行NPM init和它会创建一个默认的package.json文件。随后编辑它，使它看起来或多或少这样的：

First install Nodejs, this is so you can use it for your package manager. Don't mess with doing it through NuGet, just install the Windows install package from the website. Also I did try another pakcage manager but I think Node has the latest packages. Next you can run npm init and it will create a default package.json file. Afterwards edit it and make it look more or less like the following:

{ 
  "name": "helloworld", 
  "version": "1.0.0", 
  "description": "test npm setup", 
  "main": "main.ts", 
  "scripts": { 
    "start": "live-server" 
  }, 
  "author": "name", 
  "license": "ISC", 
    "dependencies": { 
"angular2": "2.0.0-beta.0", 
"es6-promise": "^3.0.2", 
"es6-shim": "^0.33.3", 
"reflect-metadata": "0.1.2", 
"rxjs": "5.0.0-beta.0", 
"systemjs": "0.19.8", 
"zone.js": "0.5.10" 
}, 
"devDependencies": { 
"live-server": "^0.8.2", 
"typescript": "1.7.5" 
} 
} 

现在，你有文件的package.json，其次是得到一个命令提示符在您的项目目录，然后键入以下内容：

Now that you have the package.json file, next is to get a command prompt in your project directory and type the following:

NPM安装

这将创建一个将所有的软件包可供angular2一个node_modules文件夹。

This will create a node_modules folder which will have all of the packages available for angular2.

接下来，您需要去项目/属性/打字稿Build部分并点击页面模块系统部分CommonJS的。接下来，您需要右键单击该项目，并卸载它，右键和编辑。查找以下部分：

Next you need to go to the project/properties/TypeScript Build section and click on "CommonJS" in Module System section of the page. Next you need to right click on the project and unload it, the right click and edit. Look for the following section:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> 

向下接近该部分的底部添加了接下来的两行：

Down near the bottom of that section add the next two lines:

<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> 
 <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 

OK，我们几乎完成。你需要走在node_modules文件夹，找到：

OK we are almost done. You need to walk down the node_modules folder and find:

/node_modules/typescript/lib/typescript.d.ts

/node_modules/typescript/lib/typescript.d.ts

和包括这在你的项目通过右键单击它并选择包括项目。我觉得有一些变化，这使该VS安装与Angular2打字稿工作，没有足够的专家知道只知道一吨审判的错误就是主键后。现在，我也因为我不喜欢看到红色squigles，去到index.html或你叫你的引导HTML页面什么都找到我的每一个包括来源，包括它们，只是少刺激性不是必需的。这里是包括我有一个基本的应用程序：

And include this in your project by right clicking on it and selecting include in project. I think there are some changes in this that make the VS install of typescript work with Angular2, not enough of an expert to know just know after a ton of trial an error that is the main key. Now I also because I do not like to see red squigles, go in to the Index.html or what ever you call your boot html page and find each of my include sources and include them, not essential just less irritating. Here are the includes I have to a basic app:

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/typescript/lib/typescript.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

我不敢相信我有多少时间花在得到这个结论。我读了多个不同的，有时相互矛盾的方式来完成这项工作。我希望这有助于研究员新手渡过了难关！

I can not believe how many hours I spent getting to this conclusion. I read multiple different and sometimes conflicting ways to make this work. I hope this helps a fellow newbie get over the hump!

推荐答案

@ M.Gamble - 假设你使用ASP.NET核心的Web应用程序使用VS 2015年然后按照此链接的 http://www.mithunvp.com/angular-2-in -Asp净5打字稿视觉工作室-2015 /

@M.Gamble - Assuming that your using ASP.NET Core web apps to run Angular 2 using VS 2015 then follow this link http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

如果你想找的ASP.NET MVC 5，然后通过上面的链接的评论部分。他们可能会帮助你。

If your looking for ASP.NET MVC 5, then go through comments section of above link. They might help you.

这篇关于起始Angular2上的Visual Studio 2015年一期工程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！