ASP.NET Core多个Angular应用程序

Question

我有一个ASP.NET Core 2.1项目，需要为多个Angular应用程序设置工作空间，并遵循以下路由：

http://someurl.com/main -> 第一个应用程序
http://someurl.com/admin -> 第二个应用程序

我使用以下设置的angular-cli.json文件：

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
},
{
  "root": "src2",
  "outDir": "dist2",
  "assets": [
    "assets"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

我一直在尝试在 Startup.cs 中设置以下映射：

app.Map("/main", l => 
        {
            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "ClientApp";

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

        app.Map("/admin", l =>
        {
            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "ClientApp";
                spa.UseSpaPrerendering(options =>
                {
                    options.BootModulePath = $"{spa.Options.SourcePath}/dist2/main.bundle.js";
                    options.BootModuleBuilder = env.IsDevelopment()
                        ? new AngularCliBuilder(npmScript: "build2")
                        : null;
                });

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

在 project.json 中使用以下脚本：

"scripts": {
"ng": "ng",
"start": "ng serve --extract-css --base-href=/main/ --serve-path=/main/",
"start2": "ng serve --app=1 --extract-css --base-href=/admin/ --serve-path=/admin/ ",
"build": "ng build --extract-css",
"build2": "ng build --app=1 --extract-css"

当我启动解决方案的主应用程序时，一切正常，但当我尝试进入管理员时，出现错误：

错误：无法匹配任何路由。 URL段：'admin' 错误：无法匹配任何路由。

请告诉我我错过了什么，做错了什么以实现我的目标，谢谢任何建议！

- 3axap

---

嗨，Ami - 我有一个非常相似的要求。你最终解决了吗？ - OzDave

Answer 1

您正在将单页应用程序（SPA）注册到app而不是映射的路径上：

app.Map("/admin", l =>
{
    app.UseSpa(spa =>

将app更改为l以解决问题：

app.Map("/admin", l =>
{
    l.UseSpa(spa =>

- sven.to

Answer 2

在实时处理这种情况后，终于得到了可行的解决方案。

源代码：https://github.com/alpitg/.NetCoreSpa

重要步骤： 1. 在Startup.cs文件的Configure()方法中使用以下代码：

  // for each angular client we want to host use Map function
            app.Map(new PathString("/clientapp1"), client =>
            {
                string clientApp1Path = env.IsDevelopment() ? "ClientApp1" : @"ClientApp1/dist";

                // Each map gets its own physical path for it to map the static files to. 
                StaticFileOptions clientApp1Dist = new StaticFileOptions()
                {
                    FileProvider = new PhysicalFileProvider(
                            Path.Combine(Directory.GetCurrentDirectory(), clientApp1Path)
                        )
                };

                // Each map its own static files otherwise it will only ever serve index.html no matter the filename 
                client.UseSpaStaticFiles(clientApp1Dist);

                client.UseSpa(spa =>
                {
                    spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
                    spa.Options.SourcePath = "ClientApp1";

                    if (env.IsDevelopment())
                    {
                        // it will use package.json & will search for start command to run
                        spa.UseAngularCliServer(npmScript: "start");
                    }
                    else
                    {
                        spa.Options.DefaultPageStaticFileOptions = clientApp1Dist;
                    }
                });
            });

2. package.json file changes,

       "start": "ng serve --servePath / --baseHref /newui/",
       "build": "ng build --baseHref /newui/",
       "build:ssr": "npm run build --baseHref /newui/ -- --app=ssr --output-hashing=media",
   

这里是我分享的主要更改。如需更多细节，请使用源代码并比较您的更改。

注意：已测试与.net core 2.2和angular 7

有关更多详细信息，请参阅我的博客： https://wayeasier.home.blog/2019/07/21/hosting-two-angular-app-behind-net-core-web-application/

- Alpit G

---

第一个应用程序处理所有路由，以便导航到其他路径会回退到先前的路径。似乎无法正确实现。 - rey_coder

Answer 3

@sven.to的回答是正确的，我在这里只是为了更清晰地贴出完整的代码片段：

        app.Map("/foo", l => l.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

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

这将添加/foo前缀，现在https://localhost:44383/foo/main.js将显示main.js，而https://localhost:44383/main.js将返回404未找到。

- sashoalm