如何设置中间件以在 asp.net 核心 MVC 应用程序中并排运行反应和角度应用程序？

Question

我在同一个 asp.net core 2.1 应用程序中有一个 angular & react 应用程序（clientapp1 和 clientapp2）。我可以在它的文件夹 clientapp1 和 clientapp2 中运行应用程序。它们在自己的端口中运行并且工作正常。

我添加了以下代码来分支路径。我希望在使用端点 http://localhost:5000/clientapp1 时运行 Angular 应用程序，并在运行 http://localhost:5000/clientapp2 时运行反应应用程序。

app.Map("/clientapp1", clientapp1 =>
{
    clientapp1.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp1";

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

app.Map("/clientapp2", clientapp2 =>
{
    clientapp2.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp2";

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

在应用程序根文件夹中运行命令dotnet run 时，asp.net 核心应用程序不起作用。我收到以下错误。错误说它在 http://localhost:5000/ 文件夹中查找文件。

角度：

反应：

我必须设置什么配置来告诉两个应用程序在哪里查找文件。

如果我将代码 clientapp1.UseSpa(spa => 更改为 app.UseSpa(spa =>，我可以让它工作。但副作用是http://localhost:5000/clientapp2 不起作用。

Answer 1

您必须有两个脚本并在脚本中添加 --serve-path 和 --base-href。通常你的 package.json 中有

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start:app1": "ng serve --base-href=/clientapp1/ --serve-path=/clientapp1", 
    "start:app2": "ng serve --base-href=/clientapp2/ --serve-path=/clientapp2", 
    "build": "ng build",
     ...
  },
  ....
}

在你的 startup.cs 中，例如

//for app1
if (env.IsDevelopment())
{
   spa.UseReactDevelopmentServer(npmScript: "start:app1");
}
//for app2
if (env.IsDevelopment())
{
   spa.UseReactDevelopmentServer(npmScript: "start:app2");
}