时间戳

首页 > 解决方案 > 无法使用 Visual Studio Code 从 Typescript 访问 C# 控制器

typescript - 无法使用 Visual Studio Code 从 Typescript 访问 C# 控制器

问题描述

我已经使用 Visual Studio 2017 使用 ASP.NET Core 后端在 Angular 4+（我们现在是 6）上工作了好几个月，但我无法接受 VS2017 模板会出现的错误数量再溢出来。总而言之，我总是可以很好地调试，但该模板不允许轻松部署。

受够了这一切，我决定试一试 VS Code，我对 Angular 开发在它上面的工作方式感到惊讶。我设法将我所有的 Typescript 文件迁移到一个新项目（使用ng new my-project），并且我设法浏览甚至发布，没有任何问题，但也没有后端。这就是事情变得艰难的时候。我在 VS Code 中为 API 创建了另一个项目，dotnet new -o webapi尽管我可以将所有 C# 代码迁移到它并成功构建它，但对于我的生活，我无法从 typescript 调用我的 C# 路由。

对于初学者，我知道ng serve将角度应用程序部署到端口 4200，而dotnet run将后端部署到端口 5000，这本身就是一个问题，但是我如何构建我的代码以便在同一个端口下运行两个应用程序？我不想回到 SPA 模板dotnet new Angular（我按照本教程在 VS Code 中设置了我的 Angular 6 应用程序，它运行得非常好，但我似乎找到了一种方法来创建它可以收听的 C# API。

回到 VS2017，我只需将两个项目放在同一个解决方案下，运行 Web 项目，一切正常。但是现在我不知道如何构建我的代码以便在 VS Code 下执行相同的操作，每当我尝试从 API 调用方法时，我总是会收到 404 错误（这是可以理解的，因为我没有在听调用到我正在运行前端应用程序的同一端口的后端）。总之，我想将开发环境从 VS2017 迁移到 VS Code，而不使用 SPA 模板，同时在同一个端口下运行前端和后端（就像模板允许的那样），但我被卡住了。

打字稿调用：

this.http.post('/api/lists/GetPack/', { Id: frameList.Id }).subscribe(result => {
  this.pack = result.json();
});

C#控制器：

[Route("api/[controller]")]
public class ListsController : Controller
{
    private ListDbContext context;

    public ListsController(ListDbContext context)
    {
        this.context = context;
    }

    [HttpPost]
    [Route("[action]")]
    public IActionResult GetPack([FromBody]HttpData postData)
    {
        var autoList = new AutoList(context);
        autoList.Load(postData.Id);
        var response = JsonConvert.SerializeObject(autoList.Pack);
        return Ok(response);
    }
}

标签： typescriptasp.net-corevisual-studio-codeangular6

解决方案

我也有和你一样的问题。我想将我的 Angular 部署到 WebAPI 项目中。所以这就是我所做的。

第 1 步：我将 WebAPI 项目和 Angular CLI 项目放在同一个文件夹中

资源

-- WebAPI（.NET 核心）

-- WebUI（角度）

第 2 步：在 Angular 配置中编辑 Angular 项目的输出：

"outDir": "../WebAPI/wwwroot/dist"(.angular-cli.json)

或者

"outputPath": "../WebAPI/wwwroot/dist"(Angular.json)

第 3 步：从 WebUI，运行ng build

第 4 步：运行 WebAPI

注意：您应该在 Startup 中允许 StaticFile

app.UseDefaultFiles();
app.UseStaticFiles();

第五步：打开http://localhost:5000/dist

Angular 输出正在 .NetCore 服务器上运行。

您可以删除dist文件夹并使用您想要的任何位置，但它应该在 wwwroot

推荐阅读