CODEWITHSUNDEEP
angularangular2-routing
Mac
Mac

Reputation: 1173

Angular 4 Routing Issues

Angular does not seem to be loading the components that I configure to the empty '' path.

Here is my project set up:

project/
|- app/
|   |- landing-page/
|   |- second-page/
|   |- third-page/
|   |- app-routing.module.ts
|   |- app.component.html
|   |- app.component.ts
|   `- app.module.ts
|- index.html
`- main.ts

app-routing.component.ts:

const appRoutes: Routes = [{
        path: '',
        loadChildren: 'app/landing-page/landing-page.module#LandingPageModule'
    },{
        path: 'second',
        loadChildren: 'app/second-page/second-page.module#SecondPageModule'
    },{
        path: 'third',
        loadChildren: 'app/third-page/third-page.module#ThirdPageModule'
    },{
        path: '**',
        redirectTo: '/'
}]

@NgModule({
    imports: [
        RouterModule.forRoot(
            appRoutes,
           { enableTracing: true }
        )
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

app.component.html:

<router-outlet></router-outlet>

index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AnguTest</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-root></app-root>
</body>
</html>

landing-page.component.ts (all 3 components are declared just like this):

const landingRoutes: Routes = [
  { path: '',  component: LandingPageComponent }
]
export const landingRouting = RouterModule.forChild(landingRoutes)

@NgModule({
  imports: [
    CommonModule,
    landingRouting
  ],
  declarations: [LandingPageComponent]
})
export class LandingPageModule { }

The problem is whenever I navigate to the app in my browser, the output is always:

second-page works!

Even when I change the url to http://localhost:4200/ or http://localhost:4200/third, I only ever see the out put of the 2nd page.

I have tried to rearrange the route declaration order but it is still always the second-page.

If its helpful, I have included the output from the Chrome console. It looks like the app is identifying the route correctly.

Router Event: NavigationStart
NavigationStart(id: 1, url: '/')
NavigationStart
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
Router Event: RoutesRecognized
RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
RoutesRecognized
Router Event: GuardsCheckStart
GuardsCheckStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
GuardsCheckStart
Router Event: GuardsCheckEnd
GuardsCheckEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } , shouldActivate: true)
GuardsCheckEnd
Router Event: ResolveStart
ResolveStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
ResolveStart
Router Event: ResolveEnd
ResolveEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
ResolveEnd
Router Event: NavigationEnd
NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/')
NavigationEnd

========== RESOLVED ==========

The problem was that I did not actually declare the route config in all of my modules:

// this bit....
const landingRoutes: Routes = [
  { path: '',  component: LandingPageComponent }
]
export const landingRouting = RouterModule.forChild(landingRoutes)

The empty path '' was not working because I was importing the Modules which I was routing to in app.module.ts, effectively doing a double import and causing weird behavior.

After removing the FirstPageModule and SecondPageModule from the imports list, the issue was resolved.

See this answer for more details: Default route redirect not working for lazy loaded routes in Angular 2

Upvotes: 1

Views: 4040

Answers (1)

Rahul Singh
Rahul Singh

Reputation: 19622

Try Changing the route to some thing like this

  const appRoutes: Routes = [
    {
      path:'',
      redirectTo: 'first',
      pathMatch: 'full' 
    },
    {
      path: 'first',
      loadChildren: 'app/landing-page/landing-page.module#LandingPageModule'
    }, 
    {
     path: 'second',
     loadChildren: 'app/second-page/second-page.module#SecondPageModule'
    }, 
    {
     path: 'third',
     loadChildren: 'app/third-page/third-page.module#ThirdPageModule'
   }, 
   {
     path: '**',
     redirectTo: '/'
  }];

Upvotes: 2

Related Questions