为什么我的 Angular 应用程序将我的有效路由识别为无效？答案

【问题标题】：Why my Angular app recognizes my valid routes as invalid?为什么我的 Angular 应用程序将我的有效路由识别为无效？
【发布时间】：2018-05-19 23:39:31
【问题描述】：

在这个应用程序中，我有两个基本的两个基本NgModules 和路由，核心（用于页眉、页脚和主页）和一个auth 基本上用于身份验证。在不使用wildcard 的情况下，应用程序在components 之间完美路由。一旦我引入了无效路由，唯一加载的组件就是主组件。我从我的标头组件路由，即routerLink="/signin" 知道为什么会这样吗？

以下是我的代码，

核心模块

@NgModule({
    declarations: [
      HeaderComponent,
      FooterComponent,
      SidenavLeftComponent,
      HomeComponent
    ],
    imports: [
      CommonModule,
      BrowserModule,
      BrowserAnimationsModule,
      MDBBootstrapModule.forRoot(),
      MDBBootstrapModulePro.forRoot(),
      NgbModule.forRoot(),
      AppRoutingModule
    ],
    exports: [
      HeaderComponent,
      FooterComponent,
      SidenavLeftComponent,
      HomeComponent,
      AppRoutingModule
        ],
    schemas: [ NO_ERRORS_SCHEMA ]
  })
  export class CoreModule { }

AppRoutingModule

const appRoutes: Routes = [
    { path: '', redirectTo: 'home' , pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'not-found', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}},
    { path: '**', redirectTo: '/not-found',  pathMatch: 'full'}
];
@NgModule({
    imports: [
      RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules})
    ],
    exports: [RouterModule]
    })
    export class AppRoutingModule {
    }

AuthModule

@NgModule({
  declarations: [
    SigninFormComponent,
    SignupRequestFormComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule,
    MDBBootstrapModulePro,
    NgbModule,
    AuthRoutingModule
  ]
})
export class AuthModule { }

AuthRoutingModule

const authRoutes: Routes = [
 { path: 'signin', component: SigninFormComponent },
 { path: 'signup', component: SignupRequestFormComponent }
];

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

AppModule

@NgModule({
  declarations: [
    AppComponent,
    ErrorPageComponent,
    NotFoundComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    CoreModule,
    AuthModule,
    AppRoutingModule
  ],
  providers: [
    MDBSpinningPreloader,
    UserService,
    ConfigService,
    AuthGuard,
    { provide: Http, useClass: AuthenticatedHttpService }
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

【问题讨论】：

标签： angular2-routing angular5 angular4-router

【解决方案1】：

应用模块

 @NgModule({
    .....
    imports: [
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
     HttpModule,
     CoreModule,
     AuthModule,
     AppRoutingModule
    ],

您首先加载 CoreModule，因此您的 AppRoutingModule 将首先加载，并且每个无效路由和未定义的路由都将被重定向到您的通配符表达式。

    const appRoutes: Routes = [
        { path: '', redirectTo: 'home' , pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'not-found', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}},
        { path: '**', redirectTo: '/not-found',  pathMatch: 'full'}
    ];

因此，您应该在 AppModule 声明中的 CoreModule 之前加载 AuthModule，或者从 AppRoutingModule 中删除通配符表达式并将其放入 AuthRoutingModule 中。

【讨论】：