Warum erkennt meine Angular-App meine gültigen Routen als ungültig?

Question

Ich habe zwei grundlegende zwei grundlegende NgModules und Routing auch in dieser App, Kern (für Header, Footer und Homepages) und eine auth für die Authentifizierung im Grunde. ohne die wildcard zu verwenden, verläuft die App perfekt zwischen components. Sobald ich das ungültige Routing eingeführt habe, ist die einzige Komponente, die geladen wird, die Home-Komponente. Ich bin Routing von meinem Header-Komponente, d. H. routerLink="/signin" keine Ahnung, warum ist das passiert?

Das folgende ist mein Code,

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 
    ], 

Sie laden Coremodule zuerst, so dass Ihre AppRoutingModule wird geladen Die ersten und alle ungültigen Routen und die Routen, die dort nicht definiert sind, werden auf Ihren Ausdruck der Widlcard umgeleitet.

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'} 
    ]; 

Also entweder sollten Sie AuthModule vor Coremodule in AppModule Erklärungen laden oder Wildcard-Ausdruck von AppRoutingModule entfernen und es in AuthRoutingModule setzen.