Can'；使用Visual Studio代码从Typescript访问C#控制器

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

受够了所有这些，我决定给VS代码一个旋转，我很惊讶角度开发是如何工作的。我成功地将我所有的Typescript文件迁移到一个新项目（使用

ng new my project

），并且我成功地浏览甚至发布，没有任何问题，但也没有后端问题。这就是事情变得艰难的时候。我用VS代码为API创建了另一个项目，使用dotnet new-o webapi，尽管我可以将所有C代码迁移到它并成功构建它，但就我的一生而言，我无法从typescript调用我的C路径

对于初学者，我知道

ng serve

将把angular应用程序部署到端口4200，而

dotnet run

将后端部署到端口5000，这本身就是一个问题，但是我如何构造代码以便在同一端口下运行这两个应用程序呢？我不想回到SPA模板（

dotnet new Angular

），这是我能找到的关于VS2017和谷歌VS code上Angular6+ASP.NET核心的唯一信息。我随后在VS代码中设置了Angular 6应用程序，它工作得非常出色，但我似乎找到了一种方法来创建一个可以收听的C#API

回到VS2017，我只需要在同一个解决方案下运行两个项目，运行web项目，然后一切都正常工作。但是现在我不知道如何构造我的代码，以便在VS代码下执行相同的操作，每当我尝试从API调用方法时，总是会出现404错误（这是可以理解的，因为我没有在运行前端应用程序的同一端口上侦听对后端的调用）。总之，我想将开发环境从VS2017迁移到VS代码，而不用借助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);
    }
}

---

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

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

来源

--WebAPI（.NET内核）

--WebUI（角度）

步骤2：在角度配置中编辑角度项目的输出：

“outDir”：“./WebAPI/wwwroot/dist”

（.angular cli.json）

或

“outputPath”：“./WebAPI/wwwroot/dist”

（Angular.json）

步骤3：从WebUI运行

ng build

步骤4：运行WebAPI

注意：您应该允许在启动时使用StaticFile

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

步骤5：打开

角度输出正在.NetCore服务器上运行

---

您可以删除

dist

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

中，这本身就是一个问题，但是如何构造代码以便在同一端口下运行这两个应用程序？很简单：一点也不。告诉angular应用程序web应用程序的位置。在大多数情况下，它们运行在不同的端口、域或子域上。您可以在生产环境中将反向代理放在前面，并重定向请求，但这在开发中并不十分有用。您只需要确保在您的api中启用CORS，这样来自angular项目的请求就可以了allowed@Tseng最后，我决定将它们分为两个端口，因为您在这里的意义太大，不能忽略。非常感谢。这是毫无意义的，因为您失去了angular进行热模块更换的所有功能（只需在不重新启动的情况下更改angular源即可获得更新的网页），并且可能存在调试问题。这个问题是主机WebAPI和angular在同一端口中。我认为这是一个好方法。我们可以使用

ng build--watch

感兴趣地了解当您不直接连接到ng实例时热模块替换代码的工作方式（它需要通过WebSocket或回退机制进行连接，例如长轮询到您的ng实例，以便在代码更改时得到通知），因为您通过ASP.NET核心应用程序进行连接，并且不将输入/输出托管/重定向到应用程序，也不将输入/输出重定向到ng进程外实例（即，使用spa中间件在asp.net core应用程序中承载ng，就像在常规的

dotnet new angular

asp.net core angular+webapi模板中所做的那样。除此之外，您的安装程序将从

/dist

加载应用程序，但api处于

/api

状态，并且相关路径将只生成类似

/dist/api..：这是正确的。我实现的所有项目都有两个端口来承载api和angular。但有一个项目我必须在一个端口中承载