在Visual Studio中使用angular2
唐·钱伯斯
有没有人让Angular2（测试版）在Visual Studio中工作？
我正在使用更新版本1的Visual Studio 2015，并且有n个HTMLTypeScript项目。
如果将“模块系统”设置为“系统”，则会出现构建错误（例如：找不到模块“ Angular / core”），但它将在保存时编译ts文件（不在构建时）。如果我已经在运行该应用程序，则可以刷新页面并且它可以正常工作。
如果将“模块系统”设置为“ CommonJS”，它将正确构建，但是会出现运行时错误，例如“'require'未定义”和“无法获取未定义或空引用的属性” split”。
我认为我应该使用系统，因为这是在使用tsconfig.json和教程中使用的lite-server（具有npm start）时起作用的方法。
扎克
我有angular2使用Visual Studio2015。我必须安装.NET 5 RC1以支持tsconfig.json。他们有一个全新的项目结构，我非常喜欢。这是我的设置：
您会注意到，我将我的应用程序文件夹和ts文件放在了wwwroot中-这只是我的偏爱，并且它遵循了angular2快速入门。我将捆绑的文件从节点模块复制到wwwroot的scripts文件夹中。
我基于angular2 beta快速入门创建了一个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并选择“还原软件包”，它运行了NPM安装，以使用您看到的所有软件包创建node_modules文件夹。然后我像这样设置tsconfig.json并将其放在根目录中：
{
"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();（需要安装其他软件包），我准备再次尝试：
成功！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Linux的官方Adobe Flash存储库是否已过时？
- 2
用日期数据透视表和日期顺序查询
- 3
应用发明者仅从列表中选择一个随机项一次
- 4
Java Eclipse中的错误13，如何解决？
- 5
在Windows 7中无法删除文件（2）
- 6
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 7
套接字无法检测到断开连接
- 8
带有错误“ where”条件的查询如何返回结果？
- 9
有什么解决方案可以将android设备用作Cast Receiver？
- 10
Mac OS X更新后的GRUB 2问题
- 11
ggplot：对齐多个分面图-所有大小不同的分面
- 12
验证REST API参数
- 13
如何从视图一次更新多行（ASP.NET - Core）
- 14
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 15
计算数据帧中每行的NA
- 16
检索角度选择div的当前值
- 17
离子动态工具栏背景色
- 18
UITableView的项目向下滚动后更改颜色，然后快速备份
- 19
VB.net将2条特定行导出到DataGridView
- 20
蓝屏死机没有修复解决方案
- 21
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
我来说两句