Angular 在 Azure : Routing not working in Azure, 但在本地工作

Question

前言:我将要描述的所有内容都可以在本地工作，但当我的代码部署在 Windows 环境中的 Azure Web 应用服务中时，这些内容就不起作用。另外，我读过 answer to this question ，而且我认为它不适用于我的特定情况；我没有使用任何自定义域。

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

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

在大多数情况下，我会将用户导航至 /aboutUs/ourMission 或 /support/donations 等路线上的组件。这些路由在本地和远程运行良好。

不能很好地远程工作的是 /admin 或 /register 之类的路由。

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 如下:

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:

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

所有这些路由都可以远程和本地工作。

无法远程工作但可以在本地工作的示例:

管理模块:

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:

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 等路由时看到的内容如下:

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

我真的不太清楚为什么会发生这种情况。我猜想主机的 Web 服务器软件(IIS？)正在尝试在该路由上提供某些服务，而不是将该控制权移交给应用程序代码。我不知道这个估计是否有效，所以我希望得到一些见解。谢谢。

Answer 1

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

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