ASP.NET Core 多角度应用 [英] ASP.NET Core multiple angular app

问题描述

我有一个 ASP.NET Core 2.1，我需要使用以下路由为多个 Angular 应用程序设置工作区:

I have an ASP.NET Core 2.1 and I need to setup workspace for multiple Angular applications with following routing:

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

http://someurl.com/main -> first app
http://someurl.com/admin -> second app

我使用具有以下设置的 angular-cli.json:

I use angular-cli.json with following settings:

"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 中设置映射，如下所示:

I've been trying to setup mapping in Startup.cs like below:

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 中使用以下脚本:

With following scripts in 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"

}

当我启动解决方案主应用程序时运行良好，但是当我尝试转到 admin 时我失败并出现错误:

When I launch solution main app work's well but when I tried go to admin I have failed with error:

错误:无法匹配任何路由.URL 段:'admin' 错误:不能匹配任何路线.

Error: Cannot match any routes. URL Segment: 'admin' Error: Cannot match any routes.

请告诉我为了实现我的目标我错过了什么和做错了什么感谢您的任何建议！

Please tell what I've missed and did wrong to achieve my goal Thanks for any advice !

推荐答案

您是在 app 而非映射路径上注册单页应用程序 (SPA):

You are registering the Single Page Application (SPA) on the app not the mapped path:

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

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

Change app to l to fix the issue:

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

这篇关于ASP.NET Core 多角度应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！