child routes not routing to content page in angular 5

Question

i have created many modules which has internal components

folder strutcure

--app
      --java
        --Introduction
         --Syntax

each of them is a component , and i have added routing module to all components .

now if i add children route to app.routing.ts , it is routing correctly. but when i add child routes to different routing module ,it does not route to that component and gives error :

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'JAVACourse/Syntax'

following below are some of my codes :

1.app.routing.ts

i have commented the children routes as this is working.

 const appRoutes: Routes = [
{path:'Home' , component: HomepageComponent },
{path:'JAVACourse' , component: JavaComponentComponent },
// children: [
//   { path:  'Introduction',component:IntroductionComponent},
//            { path: 'Syntax', component: SyntaxComponent },
//   ]
// }

{path:'HTMLCourse' , component: HtmlcomponentComponent },
{path:'ASP.NET' , component: DotnetcomponentComponent },
// {path: '', redirectTo: '/Home',pathMatch: 'full'},
 //{path: '**',redirectTo: '/Home',pathMatch: 'full'  }

];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes
    )
  ],
  exports: [
    RouterModule
  ],
  providers: [
  ]
})

In my main component i have many horizontal navbar tab i.e Java Tab which routes to sidenavbar with child tabs.

2.javacomponent.html

<ul>
      <a>JAVA Course</a>
      <li routerLinkActive="active"[routerLinkActiveOptions]="{exact: true}"><a routerLink="Introduction">Introduction</a></li>
      <li routerLinkActive="active"><a routerLink="Syntax">Syntax</a></li>


</ul>

3. java.routing.ts

   const JavaRoutes: Routes = [
     {path:'JAVACourse' , component: JavaComponentComponent ,
    children: [
      { path:  'Introduction',component:IntroductionComponent},
      { path: 'Syntax', component: SyntaxComponent }
     ]}
   

   ];

   @NgModule({ imports: [ RouterModule.forChild(JavaRoutes) ], exports: [ RouterModule ] })

4.Java.module.ts

@NgModule({
  imports: [
    JavaRoutingModule
  ],
  declarations: [
    IntroductionComponent,
    SyntaxComponent
  ],
  providers: [ ]
})
export class JavaRoutingModule {}

So this my folder structure

Answer 1

In your app.routing.ts, instead of using

{path:'JAVACourse' , component: JavaComponentComponent },

use

{ 'path': 'JAVACourse', loadChildren: './java/java.module#JavaModule' },.

Also replace

{path:'JAVACourse' , component: JavaComponentComponent ,

with

{path:'' , component: JavaComponentComponent ,

in java.routing.ts. Assuming JavaModule is the module name that is inside java folder.

Answer 2

You can also use loadChildren for load lazy modules like.

{path:"lazy", loadChildren: () => CustomersModule}

I have created a demo on stackblitz. I hope this will help/guide to you/others.

Answer 3

You can also use loadChildren for load lazy modules like.

I have created a demo on stackblitz. I hope this will help/guide to you/others.

app.module.ts

const app_routes: Routes = [
    {
        path: '',
        redirectTo: '/java',
        pathMatch: 'full'
    }, {
        path: 'java',
        component:JavaModule
    },{
        path: 'php',
        loadChildren: () => PhpModule
    }
];

java.module.ts

const routes: Routes = [
    {
        path: 'java',
        component: JavaDashboardComponent,
        children: [
            {
                path: '',
                redirectTo: 'introduction',
                pathMatch: 'full'
            },{
                path: 'introduction',
                component: JavaIntroductionComponent
            },{
                path: 'syntax',
                component: JavaSyntaxComponent
            },{
                path: 'java-script',
                component: JavaScriptComponent
            }
        ]
    }
];