Azure 中的 Angular:路由在 Azure 中不起作用，但在本地工作 [英] Angular in Azure: Routing not working in Azure, but working locally

问题描述

前言:我将要描述的所有内容都可以在本地工作，但是当我的代码部署在 Azure Web 应用程序服务的 Windows 环境中时，这些内容就不起作用了.另外，我已阅读对这个问题的回答，并且我不相信它适用于我的特殊情况；我没有使用任何自定义域.

To preface: all of what I'm about to describe works locally, but does not work when my code is deployed in a Windows environment in an Azure web app service. Also, I have read the answer to this question, and I don't believe it applies to my particular situation; I am not using any custom domains.

了解更多背景信息:我没有将我的应用程序容器化；我正在使用 Azure DevOps 构建和部署代码.

For more background: I am not containerizing my app; I am building and deploying code with Azure DevOps.

我有一个相对简单的 Angular 7 (CLI) 应用程序，其中包含一些简单的路由.我有一些路由模块被导入到各自的功能模块中，然后将功能模块导入主/核心应用模块:app.module.ts.

I have a relatively simple Angular 7 (CLI) app with some simple routing. I have a number of routing modules that are imported into their respective feature modules, and then the feature modules are imported into the main/core app module: app.module.ts.

在大多数情况下，我将用户导航到路径上的组件，例如 /aboutUs/ourMission 或 /support/donations.这些路由在本地和远程运行良好.

In most cases, I am navigating users to a component at a route such as /aboutUs/ourMission or /support/donations. These routes work well locally and remotely.

不能正常工作的远程是像 /admin 或 /register 这样的路由.

What doesn't work well remotely are routes like /admin or /register.

app.module.ts:

app.module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {HeaderComponent} from './header/header.component';
import {VolunteerComponent} from './volunteer/volunteer.component';
import {TagComponent} from './tag/tag.component';
import {SummerCampComponent} from './summer-camp/summer-camp.component';
import {RegisterComponent} from './register/register.component';
import {FooterComponent} from './footer/footer.component';
import {StoreModule} from '@ngrx/store';
import {metaReducers, reducers} from './reducers';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
import {environment} from '../environments/environment';
import {ProductionEffects} from './effects/production.effects';
import {EffectsModule} from '@ngrx/effects';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ButtonModule, CalendarModule, DropdownModule} from 'primeng/primeng';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AdminModule} from './admin/admin.module';
import {CommonModule} from '@angular/common';
import {TokenInterceptor} from './interceptors/token.interceptor';
import {ParticipantEffects} from './effects/participant.effects';
import {AboutUsModule} from './about-us/about-us.module';
import {EducationModule} from './education/education.module';
import {OurSeasonModule} from './our-season/our-season.module';
import {SupportModule} from './support/support.module';
import {TicketsModule} from './tickets/tickets.module';
import {VolunteerModule} from './volunteer/volunteer.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    VolunteerComponent,
    TagComponent,
    SummerCampComponent,
    RegisterComponent,
    FooterComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    DropdownModule,
    NgbModule,
    StoreModule.forRoot(reducers, {metaReducers}),
    EffectsModule.forRoot([ProductionEffects, ParticipantEffects]),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    FormsModule,
    ButtonModule,
    CalendarModule,
    AboutUsModule,
    AdminModule,
    EducationModule,
    OurSeasonModule,
    SupportModule,
    TicketsModule,
    VolunteerModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

以一个导入的模块为例，这里是 AboutUsModule:

Using one imported module as an example, here's AboutUsModule:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

import {AboutUsRoutingModule} from './about-us-routing.module';
import {MissionComponent} from './mission/mission.component';
import {PastShowsComponent} from './past-shows/past-shows.component';
import {BoardComponent} from './board/board.component';
import { AboutUsMissionComponent } from './about-us-mission/about-us-mission.component';

@NgModule({
  declarations: [
    MissionComponent,
    PastShowsComponent,
    BoardComponent,
    AboutUsMissionComponent
  ],
  imports: [
    CommonModule,
    AboutUsRoutingModule
  ]
})
export class AboutUsModule {
}

... 和 AboutUsRoutingModule:

... and the AboutUsRoutingModule:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {MissionComponent} from './mission/mission.component';
import {PastShowsComponent} from './past-shows/past-shows.component';
import {BoardComponent} from './board/board.component';

const routes: Routes = [
  {path: 'aboutUs/mission', component: MissionComponent},
  {path: 'aboutUs/pastShows', component: PastShowsComponent},
  {path: 'aboutUs/board', component: BoardComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AboutUsRoutingModule {
}

所有这些路由都将在远程和本地工作.

All of these routes will work remotely and locally.

不能远程工作但在本地工作的示例:

管理模块:

import {NgModule} from '@angular/core';
import {AdminComponent} from './admin.component';
import {AdminRoutingModule} from './admin-routing.module';
import {ReactiveFormsModule} from '@angular/forms';
import {UserService} from '../services/user.service';
import {StoreModule} from '@ngrx/store';
import * as fromAdminState from './reducers';
import * as fromUserReducer from './reducers/user-reducer.reducer';
import {EffectsModule} from '@ngrx/effects';
import {UserEffects} from './effects/user.effects';
import {AdminDashboardComponent} from './admin-dashboard/admin-dashboard.component';
import {TabMenuModule} from 'primeng/tabmenu';
import {CommonModule} from '@angular/common';
import {SharedModule} from 'primeng/shared';
import {AdminMenuBarComponent} from './admin-menu-bar/admin-menu-bar.component';
import {AdminShowsComponent} from './admin-shows/admin-shows.component';
import {AdminParticipantsComponent} from './admin-participants/admin-participants.component';
import {SiteAdminComponent} from './site-admin/site-admin.component';
import {AccordionModule, CalendarModule, DropdownModule, InputTextareaModule} from 'primeng/primeng';
import {AdminProductionFormComponent} from './admin-shows/admin-production-form/admin-production-form.component';
import {ParticipantComponent} from './admin-participants/participant/participant.component';
import {TableModule} from 'primeng/table';
import {ParticipantsTableComponent} from './participants-table/participants-table.component';
import {AuditionTimeFormComponent} from './admin-shows/admin-production-form/audition-time-form/audition-time-form.component';

@NgModule({
  imports: [
    AdminRoutingModule,
    ReactiveFormsModule,
    StoreModule.forFeature('adminState', fromAdminState.reducers, {metaReducers: fromAdminState.metaReducers}),
    StoreModule.forFeature('userReducer', fromUserReducer.userReducer),
    EffectsModule.forFeature([UserEffects]),
    TabMenuModule,
    CommonModule,
    SharedModule,
    AccordionModule,
    TableModule,
    CalendarModule,
    DropdownModule,
    InputTextareaModule
  ],
  declarations: [
    AdminComponent,
    AdminDashboardComponent,
    AdminMenuBarComponent,
    AdminShowsComponent,
    AdminParticipantsComponent,
    SiteAdminComponent,
    AdminProductionFormComponent,
    ParticipantComponent,
    ParticipantsTableComponent,
    AuditionTimeFormComponent
  ],
  providers: [UserService]
})

export class AdminModule {
}

...和 AdminRoutingModule:

. . . and the AdminRoutingModule:

import {RouterModule, Routes} from '@angular/router';
import {AdminComponent} from './admin.component';
import {NgModule} from '@angular/core';
import {AdminDashboardComponent} from './admin-dashboard/admin-dashboard.component';
import {AdminDashboardGuard} from './admin-dashboard.guard';

const adminRoutes: Routes = [
  {
    path: 'admin',
    pathMatch: 'full',
    component: AdminComponent
  },
  {
    path: 'admin-dashboard',
    component: AdminDashboardComponent,
    canActivate: [AdminDashboardGuard]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(adminRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class AdminRoutingModule {
}

总结一下:所有这些部分都在本地工作，我可以自由地导航到我共享的路线下的所有组件.发布到我的 Azure Web 应用服务后，我在访问 /admin 等路由时看到的内容如下:

To summarize: all of these pieces work locally, and I can freely navigate to all components under the routes I've shared. Once published out to my Azure web app service, what I see when accessing a route such as /admin is the following:

您要查找的资源已被删除，有它的名字已更改，或暂时不可用.

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

我真的不知道为什么会发生这种情况.我猜主机的网络服务器软件(IIS?)正试图在该路由上提供一些东西，而不是将控制权交给应用程序代码.我不知道这个估计是否有效，所以我很想得到一些见解.谢谢.

I really don't have a good guess as to why this may be happening. I guess the host's web server software (IIS?) is trying to serve something up on that route rather than turning that control over to the application code. I don't know if that estimation is valid, so I'd love some insight. Thank you.

推荐答案

要使路由正常工作，请将其添加到 web.config 文件中

To make the routing works, add this to the web.config file

<configuration>
    <system.webServer>
         <rewrite>
            <rules>
              <rule name="AngularJS 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="/" />
              </rule>
            </rules>
          </rewrite>
          <caching enabled="true" enableKernelCache="true">
              <profiles>
                  <add extension=".js" policy="DisableCache" kernelCachePolicy="DisableCache" />
              </profiles>
          </caching>
    </system.webServer>
</configuration>

这篇关于Azure 中的 Angular:路由在 Azure 中不起作用，但在本地工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！