Angular 7 с .net core 2.1 - запуск для конкретной страницы - PullRequest
0 голосов
/ 27 октября 2018

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

Чтобы уточнить немного:

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

PASS: я хочу localhost: 5001 / angtastic / для обслуживанияapp

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 на *. 1039 *

Вот мой 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 ]

0 голосов
/ 11 января 2019

имел ту же проблему,

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

исправил ее.

config "serve":

    "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/"
        }
      }
    },
0 голосов
/ 29 октября 2018

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

  1. Добавьте вышеуказанное приложение. Карта (newPathString ("/ angtastic"), angtastic => ... затем используйте spa.UseAngularCliServer (npmScript: "start ") или UseProxyToSpaDevelopmentServer в зависимости от вашего проекта.
  2. При запуске не добавляйте никаких параметров в строку spa.UseAngularCliServer (npmScript:" start ");
  3. Package.json внутримоя папка ClientApp просто «start»: «ng serve» в качестве параметров было помещено в файл конфигурации angular.json для Angular-CLI
  4. Как я решил проблему с информацией? 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.

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

Дан.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...