个人中心
gpt4 book ai didi

typescript - 在 Visual Studio 中使用 angular2

转载 作者：太空狗 更新时间：2023-10-29 17:01:27 25 4
gpt4 key购买 nike

有人让 Angular2(测试版)在 Visual Studio 中工作吗？

我正在使用带有更新 1 的 Visual Studio 2015，并且我有 n 个 HTMLTypeScript 项目。

如果我将“模块系统”设置为“系统”，我会收到构建错误(例如:找不到模块“angular/core”)，但它会在保存时编译 ts 文件(而不是在构建时)。如果我已经在运行该应用程序，我可以刷新页面并且它可以正常工作。

如果我将“模块系统”设置为“CommonJS”，它将正确构建，但我会收到运行时错误，例如“'require' is undefined”和“无法获取未定义或空引用的属性'split'”。

我认为我应该使用 system，因为在使用 tsconfig.json 和教程中使用的 lite-server(使用 npm start)时，这是有效的。

最佳答案

我有 angular2 使用 Visual Studio 2015。我必须安装 .NET 5 RC1支持 tsconfig.json。他们有一个全新的项目结构，我非常喜欢。这是我的设置:

Solution Explorer

您会注意到我将我的应用程序文件夹和 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 并选择“恢复包”，它运行 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 并开始使用它。除此之外，我进入我的工具>选项并设置 typescript 选项，如下所示: TypeScript Options

接下来我添加了我的 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();(这需要安装额外的包)，我准备再试一次:

Eureka!

成功!

关于typescript - 在 Visual Studio 中使用 angular2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34367106/

25 4 0
文章推荐： c - Malloc 结构内的数组
文章推荐： c - 声明结构 : typedef struct name name;
文章推荐： Angular2 获取当前路径的别名
文章推荐： python - Silence PyLint 关于未使用的字符串插值变量的警告
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com