NgModules
このアプリには、基本的にコア(ヘッダー、フッター、ホームページ用)とauth
認証用の2つの基本的な2つの基本的なルーティングのものがあります。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 { }
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内に配置する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加