title: child routes not routing to content page in angular 5
body: <p>i have created many modules which has internal components </p>
  
  <p>folder strutcure </p>
  
  <pre><code>--app
        --java
          --Introduction
           --Syntax
  </code></pre>
  
  <p>each of them is a component , and i have added routing module to all components .</p>
  
  <p>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 :</p>
  
  <pre><code>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'JAVACourse/Syntax'
  </code></pre>
  
  <p>following below are some of my codes :</p>
  
  <p>1.app.routing.ts</p>
  
  <p>i have commented the children routes as this is working. </p>
  
  <pre><code> 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: [
    ]
  })
  </code></pre>
  
  <p>In my main component i have many  horizontal navbar tab i.e Java Tab which routes to sidenavbar with child tabs. </p>
  
  <p>2.javacomponent.html</p>
  
  <pre><code>&lt;ul&gt;
        &lt;a&gt;JAVA Course&lt;/a&gt;
        &lt;li routerLinkActive="active"[routerLinkActiveOptions]="{exact: true}"&gt;&lt;a routerLink="Introduction"&gt;Introduction&lt;/a&gt;&lt;/li&gt;
        &lt;li routerLinkActive="active"&gt;&lt;a routerLink="Syntax"&gt;Syntax&lt;/a&gt;&lt;/li&gt;
  
  
  &lt;/ul&gt;
  </code></pre>
  
  <ol start="3">
  <li><p>java.routing.ts</p>
  
  <pre><code>const JavaRoutes: Routes = [
    {path:'JAVACourse' , component: JavaComponentComponent ,
   children: [
     { path:  'Introduction',component:IntroductionComponent},
     { path: 'Syntax', component: SyntaxComponent }
    ]}
  </code></pre>
  
  <p>];</p>
  
  <p>@NgModule({
    imports: [
      RouterModule.forChild(JavaRoutes)
    ],
    exports: [
      RouterModule
    ]
  })</p></li>
  </ol>
  
  <p>4.Java.module.ts</p>
  
  <pre><code>@NgModule({
    imports: [
      JavaRoutingModule
    ],
    declarations: [
      IntroductionComponent,
      SyntaxComponent
    ],
    providers: [ ]
  })
  export class JavaRoutingModule {}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/CeZUO.png" rel="nofollow noreferrer">So this my folder structure </a></p>