Question

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

以下是我的代码，

CoreModule

@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

的AppModule

 @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应用程序将我的有效路由识别为无效？

1 个答案: