与visual studio一起使用angular2
Don*_*ers 13 typescript visual-studio-2015 angular
有没有人让Angular2(测试版)在Visual Studio中工作？
我正在使用Visual Studio 2015和更新1,我有一个HTMLTypeScript项目.
如果我将'模块系统'设置为"系统",我会遇到构建错误(例如:找不到模块'angular/core'),但它会在保存时编译ts文件(不是在构建时).如果我已经运行了应用程序,我可以刷新页面并且它可以工作.
如果我将'模块系统'设置为"CommonJS",它将正确构建但我得到运行时错误,例如"'require'未定义"和"无法获取未定义或空引用的属性'拆分".
我想我应该使用系统,因为这是使用tsconfig.json和教程中使用的lite-server(使用npm start)时的工作原理.
我有角度2使用Visual Studio 2015.我必须安装.NET 5 RC1以支持tsconfig.json.他们有一个全新的项目结构,我非常喜欢.这是我的设置:
您会注意到我将我的app文件夹和ts文件放在我的wwwroot中 - 这只是我的偏好,它跟随angular2快速启动.我将捆绑的文件从我的节点模块复制到我的wwwroot里面的脚本文件夹中.
我基于angular2 beta quickstart创建了一个package.json:
{
"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并选择"Restore Packages"并运行NPM安装以创建包含您看到的所有包的node_modules文件夹.然后我像这样设置我的tsconfig.json并将其放在root中:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
这是使它工作的关键.我实际上不得不为它重新加载解决方案以查看tsconfig.json并开始使用它.除此之外,我进入了我的工具>选项并设置了打字稿选项,如下所示:
接下来我添加了我的index.html文件:
<!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文件:
import { Component } from "angular2/core";
@Component({
selector: "my-app",
template: `
<div>Hello from Angular 2</div>
`
})
export class MyApp {
public constructor() {
}
}
和我的boot.ts文件:
import { bootstrap } from "angular2/platform/browser";
import { MyApp } from "./MyApp";
bootstrap(MyApp);
在这一点上,我觉得我已经准备好运行它,所以我启动它并导航到我的/index.html - 但我看到的只是"Hello World!".它似乎忽略了我为index.html提供服务的途径,并且静态地写出了文本.看着Startup.cs,我发现了问题:
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();(需要安装额外的包),我准备再试一次:
成功!
- 我还补充说:app.UseDefaultFiles(); 在app.UseStaticFiles()之前; 所以我没有必要添加/index.html到底 - https://docs.asp.net/en/latest/fundamentals/static-files.html (2认同)
| 归档时间： |
|
| 查看次数： |
4510 次 |
| 最近记录： |