How to route to sub component in angular

Issue

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.

enter image description here

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.

Solution

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)
        }
    ]
  }
];

Answered By – Issam Abdelhak

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.