Question

序言：我要描述的所有内容都在本地运行，但是当我的代码部署在Azure Web应用程序服务的Windows环境中时，这些功能不起作用。另外，我已经读过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 {
}

所有这些路线都将在本地和远程工作。

无法远程运行但可以在本地运行的示例：

AdminModule：

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之类的路由时看到的内容如下：

您正在寻找的资源已被删除，其名称更改，或暂时不可用。

我真的不知道为什么会发生这种情况。我猜想主机的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>

Azure中的Angular：路由不在Azure中工作，但在本地工作

1 个答案: