Блог

Главная - Вопросы по программированию - Angular 8 — маршрутизация работает локально, но при развертывании в рабочей среде маршруты не работают — Серверная часть .NET Core C #

Angular 8 — маршрутизация работает локально, но при развертывании в рабочей среде маршруты не работают — Серверная часть .NET Core C #

#c# #angular #asp.net-mvc #routes

#c# #angular #asp.net-mvc #маршруты

Вопрос:

В моем приложении я создал маршруты, они отлично работают на локальном хосте, я могу перейти к:

 localhost:4200/about

но при развертывании в рабочей среде, если я перейду к:

 myapp.com/about

произойдет то, что браузер почти мгновенно перепишет URL на: myapp.com/index.html , а затем сразу после этого конечный URL, который я увижу на панели навигации браузера, будет путем по умолчанию: «myapp.com /»

Мой код маршрутизации:

 const appRoutes: Routes = [
  { path: "", redirectTo: "/", pathMatch: "full" },
  { path: "about", component: AboutComponent },
  { path: "**", redirectTo: "/" },
];

@NgModule({
  imports: [
      RouterModule.forRoot(appRoutes)
  ],
  exports: [
      RouterModule
  ]
})
export class AppRoutingModule {}

и я добавил модуль приложения, который, как я прочитал, может помочь:

providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}] ,

на стороне серверной части (интерфейс и серверная часть находятся в одном проекте) это код:

 public void Configure(
....
            app.UseDefaultFiles();
            app.UseSpaStaticFiles();
            app.UseMvc(routes => {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
                routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" 
            });
            });
           app.UseSpa(spa => {
                spa.Options.SourcePath = "FrontEnd";
                if (env.IsDev()) {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });

в HomeController :

   public IActionResult Index() => Redirect("index.html");

файл web.config :

 <configuration>
  <system.webServer>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified"/>
    </handlers>
    <aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%" stdoutLogEnabled="false" stdoutLogFile=".logsstdout" forwardWindowsAuthToken="false"/>
  </system.webServer>
</configuration>

Таким образом, в основном при любом развертывании, если я попытаюсь перейти к своему маршруту « /about «, он просто перепишет index.html , а затем перенаправит на «/»

Есть идеи?

Комментарии:

1. ng build --prod не могли бы вы применить флаг —prod при создании приложения angular?

2. да, это моя команда docker для сборки образа: «ЗАПУСТИТЬ npm run build — —prod »

3. на вкладке сеть в Chrome, когда я пытаюсь добраться до своего маршрута, я вижу, что запрос Get получает код ошибки 302, а затем Index..html получает запрос

4. { path: "", redirectTo: "/", pathMatch: "full" }, здесь redirectTo:/ это не требуется.

5. удалено, но та же проблема

Ответ №1:

Это работает для меня, но на сервере IIS. Создайте файл web.config и поместите его в корневую папку файлов Angular dist.

     <?xml version="1.0" encoding="utf-8"?>
       <configuration>
         <system.webServer>
           <rewrite>
           <rules>
            <rule name="Angular Routes" stopProcessing="true">
              <match url=".*" />
               <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />   
             </conditions>
             <action type="Rewrite" url="/frontend/" />//Folder with my Angular files
          </rule>
         </rules>
       </rewrite>
         </system.webServer>
      </configuration>
Метки: