내 각도 앱이 유효한 경로를 유효하지 않은 것으로 인식하는 이유는 무엇입니까?

Question

기본적으로 두 가지 기본 두 가지가 있습니다. NgModules 및이 앱에는 코어 (헤더, 푸터 및 홈 페이지 용) 및 auth 기본적으로 인증 용으로 사용됩니다. 앱 루트를 사용하지 않고 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 안에 넣어해야합니다.