调试两个独立的应用程序，Angular 和 Web API

Question

我有两个独立的应用程序，一个是 angular，另一个是 web API。我有一个角度函数，该函数又调用.net核心中的一个方法。是否可以在角度调试函数，然后将调试器转移到.net核心，所以我的角度代码如下：：

角度函数：

onSubmit() {
  if (this.service.form.valid) {
    this.service.AddProjectDetails(this.service.form.value);
    this.service.form.reset();
    this.service.initializeFormGroup();
  }
}

  AddProjectDetails(project: AllItProject) {
    const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
    return this.http.post<AllItProject>(ROOT_URL + '/PostAllItProjectsList/',
    AllItProject, httpOptions);

}

Web API 方法 PostAllItProjectsList 是在 .net 端定义的：

// POST: api/AllItProjectsLists

[HttpPost]
public async Task<ActionResult<AllItProjectsList>> PostAllItProjectsList(AllItProjectsList allItProjectsList)
{
    _context.AllItProjectsList.Add(allItProjectsList);
    await _context.SaveChangesAsync();

    return CreatedAtAction("GetAllItProjectsList", new { id = allItProjectsList.ProjectId }, allItProjectsList);
}

当我开始调试打字稿时。调试器转到这一行：

return this.http.post<AllItProject>(ROOT_URL + '/PostAllItProjectsList/',

然后它不会转移到 PostAllItProjectsList。如何将调试器转移到 PostAllItProjectsList。 angular 端的端口号是 4200，web API 端的端口号是

https://localhost:44328/api/

任何帮助将不胜感激。

Answer 1

我认为您要问的是 .netcore 中的 AngularCliServer

你需要做的是：

添加 Microsoft.AspNetCore.SpaServices.Extensions nuget 包。

然后在 Startup.cs 中配置 Angular Cli，例如：

app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseMvc(routes =>
 {
    routes.MapRoute(name: "default",emplate: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });

重要：

要详细了解从 ASP.NET Core 提供 Angular SPA 的选项，请参阅https://go.microsoft.com/fwlink/?linkid=864501

如果您希望在单独的端口或与 .net 核心应用程序相同的端口上运行 Angular，这允许您拥有。