Angular 7 with .net core 2.1 - 为特定页面启动答案

【问题标题】：Angular 7 with .net core 2.1 - Launching for specific pageAngular 7 with .net core 2.1 - 为特定页面启动
【发布时间】：2019-04-01 05:47:10
【问题描述】：

我有一个 .NET Core 2.1 网站，Angular 7 位于 /ClientApp 中。

我正在使用 Microsoft.AspNetCore.SpaServices.Extensions

如果我转到一个页面，例如localhost:5001/pagedoesnotexist/index 然后由于某种原因 Angular 应用程序启动了。

问题 - 如果我转到不存在的页面，如何更改配置以使 ASP.NET Core 不会尝试重定向到 Angular 应用程序？
我希望它在不正确的网络请求时简单地返回标准 404。我想要一个特定的页面，例如/admin/dashboard 仅服务于 Angular 应用程序

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
...
services.AddSpaStaticFiles(configuration =>
{
   configuration.RootPath = "ClientApp/dist";
});
...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{
...
app.UseSpaStaticFiles();
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");
}
});
...
}

虽然这是我的第一个 Angular 应用程序，但到目前为止它似乎运行良好，问题出在开发环境中。

谢谢。

更新 1

进一步澄清：

通过：我想要 localhost:5001/ = 404

通过：我希望 localhost:5001/angtastic/ 为应用程序提供服务

失败：我从 zone.js (socksjs-node/info) 得到重复的 info?t=[random numbers] （它没有针对子文件夹的以下代码，所以也许我做错了什么）。我的猜测是套接字或与 webpack 相关的东西（在 angular cli 的引擎盖下）在处理此子文件夹中的应用程序时遇到了问题。

我有一个带有问题的部分解决方案：

app.Map(new PathString("/angtastic"), angtastic =>
            {
                angtastic.UseSpa(spa =>
                {
                    spa.Options.SourcePath = "ClientApp";

                    // To learn more about options for serving an Angular SPA from ASP.NET Core,
                    // see https://go.microsoft.com/fwlink/?linkid=864501

                    if (env.IsDevelopment())
                    {
                        spa.UseAngularCliServer(npmScript: "start --app=angtastic --base-href=/angtastic/ --serve-path=/angtastic/ ");
                    }
                });
             });

另外，将 index.html 更改为 BaseURL 为 .

这是我的 Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angtastic": {
      "root": "src",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angtastic",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angtastic:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angtastic:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angtastic:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "clientapp/src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "clientapp/src/favicon.ico",
              "clientapp/src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "angtastic-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angtastic:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angtastic:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angtastic"
}

【问题讨论】：

标签： angular asp.net-core single-page-application angular7 asp-net-core-spa-services

【解决方案1】：

如何使用 .net core 2.1 应用程序的 ClientApp 目录中包含的 angular 7 应用程序在 .net core 应用程序上实现子文件夹/子目录特定的 angular 应用程序（使用“dotnet watch run”命令运行）其中“angtastic”是您的项目和子文件夹的名称：

添加上述 app.Map(newPathString("/angtastic"), angtastic => ... 然后根据您的项目使用 spa.UseAngularCliServer(npmScript: "start") 或 UseProxyToSpaDevelopmentServer。
在启动时不要向 spa.UseAngularCliServer(npmScript: "start"); 行添加任何参数。
我的 ClientApp 文件夹中的 Package.json 只是“start”：“ng serve”，因为参数已放入 Angular-CLI 的 angular.json 配置文件中
我如何解决上面的 info?t=XXX 问题，在 angular.json 的“服务”部分添加以下内容：

"browserTarget": "angtastic:build",

"baseHref": "/angtastic/",

"publicHost": "",

"servePath" : "/"

如果您更喜欢在 package.json 中而不是 start 命令，您可能可以将这些作为选项传递，但我更喜欢将内容保留在 angular.json 中，但请记住 servePath 将是 --serve-path="/"

检查您的 angular.json 是否有 "root" : "src" 和 "sourceRoot": "src"
使用“dotnet watch run”从根目录（ClientApp 上方）运行项目，并打开浏览器以访问安全版本的 localhost:5001/angtastic
通过打开开发工具确认您已经成功。如果您没有看到来自 zonejs 的 404 流，那么情况看起来不错。我只看到一个 info?t=xxxx（200 代码）和一个 xhr_streaming?t=XXXX（也是 200）。

publicHost 是这个答案的真正本质，因为它指示（我认为）webpack 实时重新加载到正确的端口。此答案可能适用于其他平台，但请记住，您可能需要将端口替换为您的应用正在使用的端口，例如3000/3001。

希望这对某人有所帮助！这里的第一个应用程序，到目前为止，这是一场斗争。

丹。

【讨论】：

【解决方案2】：

有同样的问题，

"publicHost":"https://localhost:5001/management/sockjs-node"

修复它。

“服务”配置：

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "ManagementClient:build",
        "publicHost":"https://localhost:5001/management/sockjs-node"
      },
      "configurations": {
        "production": {
          "browserTarget": "ManagementClient:build:production",
          "baseHref" : "/management/",
          "servePath": "/management/"
        }
      }
    },

【讨论】：

【解决方案3】：

我正在使用 .Net Core 2.2 并使用 Docker 发布我的应用程序，所以在我的 Configure 上，我在 dev 中使用 UseAngularCliServer，并且只在 prod 上提供静态文件。

注意路径，很乱。

在package.json我添加了一个新脚本：

"scripts": {
    ...
    "start": "ng serve",
    "start-dotnet": "ng serve --baseHref=/<<SUBFOLDER>>/ --servePath=/ --publicHost=0.0.0.0/<<SUBFOLDER>>/sockjs-node/",
    ...
},

开启Startup.cs：

public void ConfigureServices(IServiceCollection services) {
    ...
    services.AddSpaStaticFiles(configuration => { configuration.RootPath = "wwwroot"; });
    ...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    ...
    app.Map(
        "/<<SUBFOLDER>>",
        builder =>
        {
            builder.UseSpa(spa =>
            {
                if (env.IsDevelopment())
                {
                    spa.Options.SourcePath = "<<PATH-TO-ANGULAR>>";
                    spa.UseAngularCliServer(npmScript: "start-dotnet");
                }
                else
                {
                    spa.Options.SourcePath = "wwwroot/<<SUBFOLDER>>";
                    spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
                    {
                        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/<<SUBFOLDER>>"))
                    };
                }
            });
        }
    );
    ...
}

在Dockerfile:

# Build Angular
FROM node:10-alpine AS build-angular
WORKDIR /usr/src/app
COPY ./<<PATH-TO-ANGULAR>>/package.json ./
COPY ./<<PATH-TO-ANGULAR>>/package-lock.json ./
RUN npm install
COPY ./<<PATH-TO-ANGULAR>>/ .
RUN npm run build -- --prod --baseHref /<<SUBFOLDER>>/

# Build API
FROM mcr.microsoft.com/dotnet/core/sdk:2.2-alpine AS build-api
WORKDIR /app
COPY ./<<PATH-TO-DOTNET>>/ ./
RUN dotnet publish -c Release -o out

# Docker
FROM mcr.microsoft.com/dotnet/core/aspnet:2.2-alpine
WORKDIR /app
COPY --from=build-angular /usr/src/app/dist ./wwwroot/<<SUBFOLDER>>
COPY --from=build-api /<<PATH-TO-DOTNET-OUT>>/out .
ENTRYPOINT ["dotnet", "<<DOTNET-DLL>>"]
EXPOSE 80

【讨论】：