0

我在这个应用程序中也有两个基本的两个基本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 { }

应用路由模块

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 {
    }

授权模块

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

认证路由模块

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

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

应用模块

@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 { }
4

1 回答 1

3

应用模块

 @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 中。

于 2017-12-10T07:42:26.390 回答