Question

在尝试使用Angular项目中的URL路径时，我走到了尽头。我已经实现了路由，routerLinks可以按预期运行，甚至可以通过防护来控制导航。但是，我需要能够使用浏览器的后退和前进箭头导航激活的路线。尝试实现此功能时，我意识到我的路由表现很奇怪。根据此处的教程Angular Routing，我应该可以通过附加/ MyComponentPath来访问我的组件。当我这样做时，我的Angular应用程序总是重定向到登录页面/首页。例如，路线：

localhost：4200 / events
localhost：4200 / dashboard
localhost：4200 / my-profile

全部重定向到/ landing-page。单击菜单中的链接时，路由有效，但是手动添加到地址栏中无效。

路由器

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminModule } from './admin/admin.module';
import { AuthGuard } from './core/auth.guard';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { ... ] from '...ALL MY COMPONENTS'; // THIS PART HAS BEEN ABBREVIATED

const routes: Routes = [
  { path: 'landing-page', component: LandingPageComponent },
  { path: 'loggedin-dashboard', component: LoggedinDashboardComponent, canActivate: [AuthGuard] },
  { path: 'events', component: EventsComponent, canActivate: [AuthGuard], canDeactivate: [CanDeactivateGuard] },
  { path: 'my-profile', component: MyProfileComponent, canActivate: [AuthGuard] },
  { path: 'create-new-event', component: CreateNewEventComponent, canActivate: [AuthGuard] },
  { path: 'about', component: AboutComponent },
  { path: 'feedback', component: FeedbackComponent, canActivate: [AuthGuard] },
  { path: 'contact', component: ContactComponent },
  { path: 'terms-of-service', component: TermsOfServiceComponent},
  { path: 'cookies-consent', component: CookiesConsentComponent, canActivate: [AuthGuard] },
  { path: 'privacy-policy', component: PrivacyPolicyComponent },
  { path: 'my-events', component: MyEventsComponent, canActivate: [AuthGuard] },
  { path: 'prices', component: PricesComponent},
  { path: 'payment', component: PaymentComponent, canActivate: [AuthGuard] },
  { path: 'my-event', component: MyEventComponent, canActivate: [AuthGuard] },
  { path: 'patch-notes', component: PatchNotesComponent, canActivate: [AuthGuard] },
  { path: 'view-event', component: ViewEventComponent, canActivate: [AuthGuard] },
  { path: 'rate-event', component: RateEventComponent, canActivate: [AuthGuard] },
  { path: 'admin-module', loadChildren: () => AdminModule, canActivate: [AuthGuard] },
  {
    path: 'dummy-list',
    component: DummyListComponent,
    data: { title: 'Dummy List' },
  },
  { path: '',
    redirectTo: '/landing-page',
    pathMatch: 'full',
  },
  { path: '**', component: PageNotFoundComponent }
];

export const ModuleRouting: ModuleWithProviders = RouterModule.forRoot(routes);

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

应用程序模块

...进口...

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent,
    DummyListComponent,
    LandingPageComponent,
    LoggedinDashboardComponent,
    PageNotFoundComponent,
    FooterComponent,
    EventListComponent,
    EventFilterComponent,
    LandingPageHeaderComponent,
    CreateAccountFormComponent,
    CreateNewEventComponent,
    EventsComponent,
    MyProfileComponent,
    ImageUploadComponent,
    UserImageGalleryComponent,
    EventControlMenuComponent,
    FeedbackComponent,
    AboutComponent,
    ContactComponent,
    AboutComponent,
    ContactComponent,
    FeedbackComponent,
    TermsOfServiceComponent,
    CookiesConsentComponent,
    PrivacyPolicyComponent,
    ActiveBlockedPipe,
    MobileLoginHeaderComponent,
    MyEventsComponent,
    PaymentComponent,
    PricesComponent,
    MyEventComponent,
    PatchNotesComponent,
    ViewEventComponent,
    ConfirmationDialogComponent,
    RateEventComponent,
    CreateWallPostComponent
  ],
  entryComponents: [MobileLoginHeaderComponent, ConfirmationDialogComponent, CreateWallPostComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    NgbModule.forRoot(),
    RoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatTabsModule,
    ModalGalleryModule.forRoot(),
    AngularFontAwesomeModule,
    AngularWebStorageModule,
    MatProgressBarModule,
    HttpClientModule,
    MatFormFieldModule,
    MatCardModule,
    MatListModule,
    MatIconModule,
    MatExpansionModule,
    MatInputModule,
    MatButtonModule,
    MatChipsModule,
    MatSelectModule,
    MatGridListModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatMenuModule,
    MatToolbarModule,
    MatTooltipModule,
    MatDialogModule,
    MatRadioModule,
    MatStepperModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatBadgeModule,
    RouterTestingModule,
    NgxSpinnerModule,
    HttpModule,
    AdminModule,
    ToastrModule.forRoot()
  ],
  providers: [CookieService, AuthGuard, CanDeactivateGuard],
  bootstrap: [AppComponent]
})



export class AppModule { }

根据我描述的症状，如何使路由器/路由按预期运行？由于用户无法输入手动路径，因此无法将/ path附加到该路径。

Answer 1

我的应用程序与routerLinks配合使用的原因是，路由器可以评估我们的当前路由，以及在工作客户端时如何从它们进行下一步。但是，为了使URL正常工作（请考虑将邀请电子邮件链接到带有params的特定组件等），我们必须根据主机设置服务器端。请参阅此链接以获取帮助Routed apps must fallback to index.html

Answer 2

我找到了解决方案。这是一个错误。

与我处于相同情况的任何人都有两个可能的答案。首先：

import { NgModule, ModuleWithProviders } from '@angular/core';

确保您要从@ angular / core导入'ModuleWithProviders'，我是从错误的软件包中导入的。

第二： //路由

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { RoutingModule, routingModule } from './routing.module'

检查进口名称的大小写。在上面的示例中，我都导入了两者，只是为了确保它获取正确的模块。

角度5 6 |网址路由无法与路由配合使用

2 个答案: