How to route to sub component in angular

Question

I am working on an angular app that has parent and sub components structure. I am having issues with navigating to the sub structures.

The main routes are working fine, the issue now is navigating to the sub components.

This is the sample folder structure for the application.

This is the (notices) main folder routing file

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { PublicNoticesPage } from './public-notices.page';

const routes: Routes = [
  {
    path: '',
    component: PublicNoticesPage
  },
  {
    path: 'notices-list',
    loadChildren: () => import('./notices-list/notices-list.module')
.then( m => m.NoticesListPageModule)
  },
  {
    path: 'notice-categories',
    loadChildren: () => import('./notice-categories/notice-categories.module')
.then( m => m.NoticeCategoriesPageModule)
  },
  {
    path: 'notice-comments',
    loadChildren: () => import('./notice-comments/notice-comments.module')
.then( m => m.NoticeCommentsPageModule)
  },
  {
    path: 'notices-nearby',
    loadChildren: () => import('./notices-nearby/notices-nearby.module')
.then( m => m.NoticesNearbyPageModule)
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PublicNoticesPageRoutingModule {}

This is the root routing file

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module')
.then( m => m.LoginPageModule)
  },
  {
    path: 'register',
    loadChildren: () => import('./pages/register/register.module')
.then( m => m.RegisterPageModule)
  },
  {
    path: 'forgot-password',
    loadChildren: () => import('./pages/forgot-password/forgot-password.module')
.then( m => m.ForgotPasswordPageModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./pages/home/home.module')
.then( m => m.HomePageModule)
  },
  {
    path: 'community',
    loadChildren: () => import('./pages/community/community.module')
.then( m => m.CommunityPageModule)
  },
  {
    path: 'tourism',
    loadChildren: () => import('./pages/tourism/tourism.module')
.then( m => m.TourismPageModule)
  },
  {
    path: 'news',
    loadChildren: () => import('./pages/news/news.module')
.then( m => m.NewsPageModule),
  },
  {
    path: 'notifications',
    loadChildren: () => import('./pages/notifications/notifications.module')
.then( m => m.NotificationsPageModule),canLoad: [AuthGuard]
  },
  {
    path: 'public-notices',
    loadChildren: () => import('./pages/public-notices/public-notices.module')
.then( m => m.PublicNoticesPageModule)
  },
  {
    path: 'deals',
    loadChildren: () => import('./pages/deals/deals.module')
.then( m => m.DealsPageModule),canLoad: [AuthGuard]
  },
  {
    path: 'settings',
    loadChildren: () => import('./pages/settings/settings.module')
.then( m => m.SettingsPageModule),canLoad: [AuthGuard]
  },
  {
    path: 'suggestions',
    loadChildren: () => import('./pages/suggestions/suggestions.module')
.then( m => m.SuggestionsPageModule)
  },
  {
    path: 'verify-account',
    loadChildren: () => import('./pages/verify-account/verify-account.module')
.then( m => m.VerifyAccountPageModule),canLoad: [AuthGuard]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

So what I want is to be able to navigate to

Notices -> notices-details ( the sub folder of notices ) and to other files as well.

Answer 1

Your (notices) main folder routing file should be like this

import{NgModule}from'@angular/core';
import{Routes,RouterModule}from'@angular/router';
import{Public Notices Page}from'./public-notices.page';


const routes: Routes = [
  {
    path:'',
    component:PublicNoticesPage, children: [
        {
            path:'notices-list',
            loadChildren:()=>import('./ notices-list/notices-list.module').then(m=>m.NoticesListPageModule)
        },
        {
            path:'notice-categories',
            loadChildren:()=>import('./ notice-categories/notice-categories.module').then(m=>m.NoticeCategories PageModule)
        },
        {
            path:'notice-comments',
            oadChildren()=>import('./ notice-comments/notice-comments.module') .then(m=>n.Notice Comments PageModule)
        },
        {
            path:'notices-nearby',
            loadChildren:()=>import('./ notices-nearby/notices-nearby.module').then(m=>m.Notices NearbyPageModule)
        }
    ]
  }
];

Answer 2

Well , I guess I needed a break from the computer. It was just a minor issue on my part.

So What I was doing wrong was not including the parent route segment when browsing to the child component plus the child route was missing a parameter as well.

So it was supposed to be like this .

  // View Public Notice Details
  publicNoticeTapped(notice) {
    const navigationExtras: NavigationExtras = {
      state: {
        articleData: notice,
      },
    };
    this.router.navigate(['public-notices/notice-details', notice.id], navigationExtras);
  }

Here is the parent routing module, I was missing :id parameter here as well.

const routes: Routes = [
  {
    path: '',
    component: PublicNoticesPage
  },
  {
    path: 'notices-list',
    loadChildren: () => import('./notices-list/notices-list.module')
.then( m => m.NoticesListPageModule)
  },
  {
    path: 'notice-categories',
    loadChildren: () => import('./notice-categories/notice-categories.module')
.then( m => m.NoticeCategoriesPageModule)
  },
  {
    path: 'notice-comments',
    loadChildren: () => import('./notice-comments/notice-comments.module')
.then( m => m.NoticeCommentsPageModule)
  },
  {
    path: 'notice-details/:id',
    loadChildren: () => import('./notice-details/notice-details.module')
.then( m => m.NoticeDetailsPageModule)
  },
  {
    path: 'notices-nearby',
    loadChildren: () => import('./notices-nearby/notices-nearby.module')
.then( m => m.NoticesNearbyPageModule)
  }
];

Thanks everyone for your assistance 💥👍

Answer 3

Routing and Lazy Loading

Minimal example with lazy loading of a child module:

AppModule:

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'one',
        loadChildren: () =>
          import('./one/one.module').then((m) => m.OneModule),
      },
    ]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

App template:

<button routerLink="one">ONE</button>
<router-outlet></router-outlet>

OneModule:

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([

      {
        path: '', component: OneComponent,
        children: [
          {path: 'two', component: TwoComponent}
        ]
      }
    ])
  ],
  declarations: [OneComponent, TwoComponent]
})
export class OneModule { }

One Template:

<p>one works!</p>
<button routerLink="two">TWO</button>
<router-outlet></router-outlet>

You could (but really shouldn't) nest more modules to be lazy loaded. You want to keep your architecture as flat as possible. So a module per feature, lazy loaded from the AppModule, is plenty enough.

Here's a Stackblitz for you to try it out.