Angular 7 с.net core 2.1 - запуск для конкретной страницы

Question

Angular 7 с.net core 2.1 - запуск для конкретной страницы

У меня есть веб-сайт.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, среда IHostingEnvironment)

{
...
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

Чтобы уточнить немного дальше:

PASS: я хочу localhost: 5001 / = 404

PASS: я хочу, чтобы localhost:5001/angtastic/ обслуживал приложение

FAIL: я получаю повторяющуюся информацию? T =[случайные числа] из zone.js (socksjs-node/info) (она работает без кода ниже, предназначенного для подпапки, поэтому, возможно, я делаю что-то не так). Я предполагаю, что сокеты или что-то связанное с веб-пакетом (под капотом 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"
}

2

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

Источник

user2597212 27 окт '18 в 20:43

1 ответ

Другие вопросы по тегам angular asp.net-core single-page-application angular7 asp-net-core-spa-services

user2597212 29 окт '18 в 18:26 2018-10-29 18:26 · Answer 1 · 2018-10-29 18:26

Как получить специальное угловое приложение для подпапки / подкаталога в основном приложении.net с угловым приложением 7, содержащимся в каталоге ClientApp приложения.net core 2.1 (запускается с помощью команды "dotnet watch run"), где "angtastic" - это имя вашего проекта и подпапки:

Добавьте вышеуказанный app.Map (newPathString ("/ angtastic"), angtastic => ..., затем используйте spa.UseAngularCliServer(npmScript: "start") или UseProxyToSpaDevelopmentServer в соответствии с вашим проектом.
При запуске не добавляйте никаких параметров в строку spa.UseAngularCliServer(npmScript: "start");
Package.json внутри моей папки ClientApp просто "start": "ng serve", поскольку параметры были помещены в файл конфигурации angular.json для Angular-CLI
Как я решил проблему info? T =XXX выше, в разделе "serve" angular.json добавьте следующее:
"browserTarget": "angtastic: build",
"baseHref": "/ angtastic /",
"publicHost": "",
"servePath": "/"

Возможно, вы могли бы передать их как опции, если вы предпочитаете в package.json команду start, но я предпочитаю хранить вещи в angular.json, но помните, что servePath будет --serve-path="/"

Убедитесь, что ваш angular.json имеет "root": "src" и "sourceRoot": "src"
Запустите проект из корня (выше ClientApp) с помощью "dotnet watch run" и откройте браузер для безопасной версии localhost:5001/angtastic
Подтвердите свой успех, открыв инструменты разработчика. Если вы не видите поток 404 с зоны, то все выглядит хорошо. Я вижу только одну информацию? T =xxxx (код 200) вместе с xhr_streaming? T =XXXX (также 200).

PublicHost - настоящая сущность этого ответа, так как он инструктирует (я думаю), что веб-пакет перезагружается в нужный порт. Этот ответ может работать для других платформ, но имейте в виду, что вам может потребоваться заменить порт тем, который используется в вашем приложении, например 3000/3001.

Надеюсь, это поможет кому-то! Первое приложение здесь и до сих пор это борьба.

Дан.

user1555348 11 янв '19 в 13:49 2019-01-11 13:49 · Answer 2 · 2019-01-11 13:49

Была та же проблема,

"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/"
        }
      }
    },

user1418378 09 май '20 в 00:56 2020-05-09 00:56 · Answer 3 · 2020-05-09 00:56

Я использую.Net Core 2.2 и публикую свое приложение с помощью Docker, поэтому на моем Configure я использую UseAngularCliServer в dev и просто обслуживайте статические файлы на 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