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

Posted 2023-02-01

我有两个独立的应用程序，一个是角度应用程序，另一个是Web API。我有一个angular函数，该函数又调用.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。角度侧的端口号是4200，Web API侧的端口号是

https://localhost:44328/api/

任何帮助将不胜感激。

答案

我认为您要的是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