CODEWITHSUNDEEP
angular2-routingangular5angular4-router
JSON
JSON

Reputation: 1623

Why my Angular app recognizes my valid routes as invalid?

I have two basic two basic NgModules and routing ones as well in this app, core (for header, footer and home pages) and an auth for authentication basically. without using the wildcard the app routes perfectly between components. once I introduce the invalid routing the only component that loads is the home one. I am routing from my header component, i.e. routerLink="/signin" any idea why is this happening?

The following is my 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 { }

Upvotes: 0

Views: 62

Answers (1)

test_124
test_124

Reputation: 1403

AppModule

 @NgModule({
    .....
    imports: [
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
     HttpModule,
     CoreModule,
     AuthModule,
     AppRoutingModule
    ],

You are loading CoreModule first, so your AppRoutingModule is loaded first and every invalid routes and the routes which are not defined there are being redirected to your widlcard expression.

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

So either you should load AuthModule before CoreModule in AppModule declarations or remove wildcard expression from AppRoutingModule and put it inside AuthRoutingModule.

Upvotes: 3

Related Questions