-1

I have to use routing into both the main module and in a feature module. When i import a router into the feature module the application doesn't work, the browser is "thinking" and stay loading until chrome says "the page doesnt't respond".

I followed without success this answer

The app routes:

const appRoutes: Routes = [
        { path: 'login', component: AuthComponent },
        { path: 'register', component: RegisterComponent },
        { path: 'resetpassword', component: ResetPassword },
        { path: 'resetpassword/choose', component: ChoosePassword },
        { path: 'tournament', component: Tournament },
        { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuard] },

        { path: '**', redirectTo: '' }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

and the routes in feature module:

const appRoutes: Routes = [
    {
        path: 'tournament', component: Tournament, children:
        [
            { path: 'new', component: TournamentCreationMain },
        ]
    },
    { path: '', component: Tournament, pathMatch: 'full', canActivate: [AuthGuard] },

    { path: '**', redirectTo: '' }
];

export const routingTournament = RouterModule.forChild(appRoutes);

In app.module i import the feature module and the app.router:

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    TournamentModule,
    routing
]

in the feature module i import its own router:

imports: [
    CommonModule,
    FormsModule,
    routingTournament,
    HttpModule
]

Thanks in advance Max

Max Bertoli
  • 614
  • 5
  • 25

1 Answers1

1

As far as I see you don't have to define the Tournament component for tournament path in appRoutes. You should also define all child routes of tournament in children array. Please try to change to:

    const appRoutes: Routes = [
        {
            path: 'tournament', 
            children: [
                { path: 'new', component: TournamentCreationMain },
                { path: '', component: Tournament, pathMatch: 'full', canActivate: [AuthGuard] },
                { path: '**', redirectTo: '' }
            ]
        },

    ];
Ratan
  • 603
  • 6
  • 19
  • It works like a charm, thanks. Why a flatter configuration doesn't work? for example: const appRoutes: Routes = [ { path: 'tournament', component: Tournament }, { path: 'tournament/new', component: TournamentCreationMain }, { path: '', component: Tournament, pathMatch: 'full', canActivate: [AuthGuard] }, { path: '**', redirectTo: 'tournament' } ]; – Max Bertoli May 27 '17 at 00:01