使用angular2与Visual Studio [英] Use angular2 with visual studio
问题描述
有没有人得到Angular2（测试版）在Visual Studio中工作？
Has anyone gotten Angular2 (beta) to work in Visual Studio?
我使用Visual Studio 2015年更新1，我有n个HTMLTypeScript项目。
I am using Visual Studio 2015 with update 1 and I have n HTMLTypeScript project.
如果我了模块系统设置为系统我得到的编译错误（如：找不到模块'角/核心），但它会编译TS文件上保存（而不是版本）。如果我已经有了运行应用程序，我可以刷新页面，它的工作原理。
If I set the 'module system' to "System" I get build errors (such as: Cannot find module 'angular/core') but it will compile the ts files on save (not on build). If I already have the application running I can refresh the page and it works.
如果我设置的模块制为CommonJS的会正确地构建，但是我得到的运行时错误，如'要求'是不确定和无法获取属性未定义或空引用'分裂'。
If I set the 'module system' to "CommonJS" it will build properly but I get runtime errors such as "'require' is undefined" and "Unable to get property 'split' of undefined or null reference".
我想是因为这是一个使用tsconfig.json和精简版服务器（带NPM启动）时，什么工作是在教程中使用，我应该使用的系统。
I think I should use system because that is what works when using tsconfig.json and the lite-server (with npm start) that is used in the tutorials.
推荐答案
我angular2与Visual Studio 2015年的工作，我不得不安装的。NET 5 RC1 支持tsconfig.json。他们有一个完全新的项目结构，我很喜欢。这里是我的设置：
I have angular2 working with Visual Studio 2015. I had to install .NET 5 RC1 to support tsconfig.json. They have a completely new project structure which I like very much. Here is my setup:
![解决方案资源管理](\"http://i.stack.imgur.com/ZXtWT.png\")
您会发现，我把我的应用程序文件夹，TS文件我的wwwroot里 - 这只是我的preference，它的跟随angular2快速入门。我从我的节点模块复制捆绑的文件到我的剧本我的wwwroot文件夹里面。
You'll notice that I put my app folder and ts files inside my wwwroot - that's just my preference, and it's following the angular2 quickstart. I copied the bundled files from my node modules into my scripts folder inside my wwwroot.
我创建基础上，angular2快速启动公测一的package.json：
I created a package.json based on the angular2 beta quickstart:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
}
}
然后我右键点击了的package.json和选择还原包，它跑到故宫安装到所有你看到的包创建node_modules文件夹。然后我安装我的tsconfig.json像这样，把它的根：
Then I right-clicked on the package.json and selected "Restore Packages" and it ran the NPM install to create the node_modules folder with all the packages you see. Then I setup my tsconfig.json like so and put it in the root:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
这是关键，使其工作。其实我不得不重新加载解决方案，它看到tsconfig.json并开始使用它。除了这个，我走进我的工具>选项和设置选项打字稿像这样：
![](\"http://i.stack.imgur.com/RFaB0.png\")
This is key to making it work. I actually had to reload the solution for it to see the tsconfig.json and start using it. In addition to this, I went into my Tools > Options and set the typescript options like so:
接下来，我将我的index.html文件：
Next I added my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample Angular 2 App</title>
</head>
<body>
<my-app>Loading...</my-app>
<script src="scripts/angular2-polyfills.js"></script>
<script src="scripts/system.src.js"></script>
<script src="scripts/Rx.js"></script>
<script src="scripts/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot').then(null, console.error.bind(console));
</script>
</body>
</html>
你的脚本的订单包括很重要！这是我的MyApp.ts文件：
The order of your script includes is important! Here's my MyApp.ts file:
import { Component } from "angular2/core";
@Component({
selector: "my-app",
template: `
<div>Hello from Angular 2</div>
`
})
export class MyApp {
public constructor() {
}
}
和我boot.ts文件：
and my boot.ts file:
import { bootstrap } from "angular2/platform/browser";
import { MyApp } from "./MyApp";
bootstrap(MyApp);
在这一点上，我觉得我已经准备好运行它，所以我发起并导航到我/index.html - ！Hello World的，但我看到了。这似乎是无视我的路径服务index.html，然后是静态写出的文字。纵观Startup.cs，我发现这个问题：
At this point I felt I was ready to run it, so I launched it and navigated to my /index.html - but all I saw was "Hello World!". It seemed to be ignoring my path to serve index.html and was statically writing out text. Looking at the Startup.cs, I found the problem.:
namespace Angular2Demo
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app)
{
app.UseIISPlatformHandler();
// Add this!
app.UseStaticFiles();
// Remove this!
//app.Run(async (context) =>
//{
// await context.Response.WriteAsync("Hello World!");
//});
}
// Entry point for the application.
public static void Main(string[] args) => WebApplication.Run<Startup>(args);
}
}
通过注释掉 app.Run 并添加 app.UseStaticFiles（）; （这需要安装一个额外的软件包），我准备再试一次：
By commenting out the app.Run and adding the app.UseStaticFiles(); (which required installing an additional package), I was ready to try again:
![找到了！](\"http://i.stack.imgur.com/em8Wo.png\")
成功！
这篇关于使用angular2与Visual Studio的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
