为什么我的 Angular 应用将我的有效路线识别为无效？

Question

我在这个应用程序中有两个基本的两个基本 NgModules 和路由，核心（用于页眉、页脚和主页）和一个 auth 基本上用于身份验证。在不使用 wildcard 的情况下，应用程序在 components 之间完美路由。一旦我引入无效路由，唯一加载的组件就是 home 组件。我从我的头组件路由，即 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 { }

Answer 1

应用模块

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

您首先加载 CoreModule，因此首先加载您的 AppRoutingModule，并且所有无效路由和未定义的路由都被重定向到您的 widlcard 表达式。

    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。

为什么我的 Angular 应用将我的有效路线识别为无效？

Why my Angular app recognizes my valid routes as invalid?

angular2-routing

angular5

angular4-router