typescript - 无法使用 Visual Studio Code 从 Typescript 访问 C# Controller

Question

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

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

对于初学者来说，我知道 ngserve 会将角度应用程序部署到端口 4200，而 dotnet run 将后端部署到端口 5000，这是一个问题本身，但是如何构建我的代码以便在同一端口下运行两个应用程序？我不想回到 SPA 模板 (dotnet new Angular)，这是我能在 VS2017 和 VS 上找到的有关 Angular6 + ASP.NET Core 的唯一信息谷歌上的代码。我关注了this tutorial在 VS Code 中设置我的 Angular 6 应用程序，它运行得非常好，但我似乎可以找到一种方法来创建它可以监听的 C# API。

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

typescript 调用:

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

C# Controller :

[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);
    }
}

Answer 1

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

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

来源

--WebAPI(.NET Core)

-- WebUI(角度)

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

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

或

“outputPath”:“../WebAPI/wwwroot/dist”(Angular.json)

第 3 步:从 WebUI 运行 ng build

第 4 步:运行 WebAPI

注意:您应该在启动中允许 StaticFile

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

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

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

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