Приложение ASP.NET Core с несколькими углами

avatar
3axap
8 апреля 2018 в 07:41
4832
3
10

У меня есть 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» Ошибка: невозможно соответствуют любым маршрутам.

Пожалуйста, скажите, что я пропустил и сделал неправильно, чтобы достичь своей цели Спасибо за любой совет!

Источник
OzDave
26 июня 2018 в 23:31
1

Привет, Ами. У меня очень похожее требование. Вы когда-нибудь заставляли это работать?

Ответы (3)

avatar
sashoalm
11 сентября 2019 в 14:49
0

Ответ @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 Not Found.

avatar
Alpit G
23 июля 2019 в 18:11
1

После рассмотрения такого сценария в режиме реального времени наконец-то было найдено рабочее решение.

Исходный код: 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;
                    }
                });
            });
  1. изменения файла package.json,

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

rey_coder
29 августа 2019 в 22:56
0

первое приложение обрабатывает всю маршрутизацию, так что переход к другому пути возвращается к предыдущему. Кажется, я не могу понять это правильно.

avatar
sven.to
26 июня 2018 в 23:23
6

Вы регистрируете одностраничное приложение (SPA) по app не сопоставленному пути:

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

Замените app на l, чтобы устранить проблему:

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