CODEWITHSUNDEEP
angularangular2-routing
鄭元傑
鄭元傑

Reputation: 1647

Angular2 routing to wrong page

My angular2 core module is 2.0.2, routes is 3.0.2.

When I declare one app.routes for rootRoute and one main.routes for childRoute, somehow the base html('/') would jump to childRoute base(such as /main) and show the wrong component.
I have already added base href="/" to my index.html and the router-outlet work fine.
I am pretty sure that the file reference is correct( Two routes file export same name "routes")
When I enter "/account" the page load correctly, the only problem is '/' would be load as '/main' and I don't know why.
Other routes work well , "/account","/main","/main/hero".. etc

Here is my code
app.module

import {routes} from './app.routes';

@NgModule({
  imports:      [ BrowserModule, MainModule, routes, ReactiveFormsModule ],
  declarations: [ AppComponent, AccountComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ HeroService, TaskService ]
})
export class AppModule { }

app.routes

import {MAIN_ROUTES} from "./main/main.routes";

const APP_ROUTES: Routes = [
    { path:'', component: AccountComponent},
    { path:'account', component: AccountComponent},
    { path:'main', component: MainComponent, children: MAIN_ROUTES},
];
export const routes = RouterModule.forRoot(APP_ROUTES);

main.module

import {routes} from "./main.routes";

@NgModule({
  imports:      [ CommonModule, routes, HeroModule, ReactiveFormsModule,TaskModule ],
  declarations: [ MainComponent, ManageComponent],
  exports:      [ MainComponent]
})
export class MainModule { }

main.routes

export const MAIN_ROUTES: Routes = [
    { path:'hero', component: HeroComponent},
    { path:'task', component: TaskComponent},
    { path:'manage', component: ManageComponent},
    { path:'', component: TaskComponent}
];

export const routes = RouterModule.forChild(MAIN_ROUTES);

=========(update)
The weird thing is that I change my main.routes.ts 

export const MAIN_ROUTES: Routes = [
    { path:'main/hero', component: HeroComponent},
    { path:'main/task', component: TaskComponent},
    { path:'main/manage', component: ManageComponent},
    { path:'main', component: TaskComponent}
];

The index (http://localhost:3000) show the correct component.
However , '/main/hero' and '/main/main/hero' both work!.
It seems that child route doesn't append parent route.
Can anyone reproduce the problem ? What is going on here?

Upvotes: 4

Views: 4069

Answers (1)

鄭元傑
鄭元傑

Reputation: 1647

I change the code and it works. app.module.ts

@NgModule({
  imports:      [ BrowserModule, MainModule, routes, ReactiveFormsModule ],
  declarations: [ AppComponent, AccountComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ HeroService, TaskService ]
})
export class AppModule { }

app.routes.ts

const APP_ROUTES: Routes = [
    { path:'account', component: AccountComponent},
    { path:'main', component: MainComponent, children: MAIN_ROUTES},
    { path:'', component: AccountComponent},
    { path:'**', component: AccountComponent},
];

export const routes = RouterModule.forRoot(APP_ROUTES);

main.module.ts

@NgModule({
  imports:      [ CommonModule, RouterModule, HeroModule, ReactiveFormsModule,TaskModule ],
  declarations: [ MainComponent, ManageComponent, NavComponent],
  exports:      [ MainComponent]
})
export class MainModule { }

main.routes.ts

export const MAIN_ROUTES: Routes = [
    { path:'hero', component: HeroComponent},
    { path:'hero/:id', component: HeroDetailComponent},
    { path:'task', component: TaskComponent},
    { path:'task/:id', component: TaskDetailComponent},
    { path:'manage', component: ManageComponent},
    { path:'', component: TaskComponent, pathMatch:'full'}
];

The main change is that I remove "RouterModule.forChild(MAIN_ROUTES)" and instead I simply import "RouterModule" in main.module.ts.
Then every thing works well.

Upvotes: 0

Related Questions