Question:

In my app I have two main parts:

<ul><li>Authorization - login and registration pages</li> <li>Panel - basic app pages</li> </ul>

In my app.component.html I have router outlet for navigation to Authorization and Panel components.

However in the mentioned components I have another router outlets for navigation between cards (subcomponents). I tried to do routing separetly for each module, but it doesnt work. When I go to path eg. "/authorization/login" I got error that such url doesnt exists.

Here is my app-routing.module.ts

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { PanelComponent } from '../panel/panel.component'; import { AuthorizationComponent } from '../authorization/authorization.component'; import { DeliveriesComponent } from '../panel/cards/deliveries/deliveries.component'; const routes: Routes = [ {path: '', redirectTo: 'authorization', pathMatch: 'full'} ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [RouterModule] }) export class RoutingModule { }

authorization-routing.module.ts

const authorizationRoutes: Routes = [ {path: 'authorization', component: AuthorizationComponent, children: [ {path: 'authorization/register', component: RegisterComponent}, {path: 'authorization/login', component: LoginComponent}, {path: 'authorization/restaurant-registration', component: RestaurantRegistrationComponent}, {path: 'authorization/confirmation', component: ConfirmationComponent} ] } ]; @NgModule({ imports: [ RouterModule.forChild(authorizationRoutes) ], exports: [RouterModule] }) export class AuthorizationRoutingModule { }

app.module.ts

import { PanelModule } from './panel/panel.module'; import { AuthorizationModule } from './authorization/authorization.module'; import { RoutingModule } from './routing/routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, LayoutModule, PanelModule, AuthorizationModule, FormsModule, RoutingModule ], providers: [], bootstrap: [ AppComponent, ] }) export class AppModule { }

Could you explain me what I am doing wrong with this routing? I tried many ways to solve this issue, but nothing worked.

Change the routes to this:

const authorizationRoutes: Routes = [ {path: 'authorization', component: AuthorizationComponent, children: [ {path: 'register', component: RegisterComponent}, {path: 'login', component: LoginComponent}, {path: 'restaurant-registration', component: RestaurantRegistrationComponent}, {path: 'confirmation', component: ConfirmationComponent} ] } ];

You don't need to specify authorization again, because they are child routes

I can suggest you to implement this by creating seperate modules (i.e. Lazy loaded Modules) for each child Components. Lets say for RegisterComponent, you can create RegisterModule. Then you have to change the routes as shown below:

const authorizationRoutes: Routes = [ { path: 'authorization', component: AuthorizationComponent, children: [ { path: 'register', loadChildren: './register/register.module#RegisterModule' }, { path: 'login', loadChildren: './login/login.module#LoginModule' }, { path: 'restaurant-registration', loadChildren: './restaurant-registration/restaurant-registration.module#RestaurantRegistrationModule' }, { path: 'confirmation', loadChildren: './confirmation/confirmation.module#ConfirmationModule' } ] } ];