дочерние маршруты не перенаправляются на страницу содержимого в угловых 5

Question

Я создал много модулей, которые имеют внутренние компоненты

структура папки

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

каждый из них является компонентом, и я добавил модуль маршрутизации ко всем компонентам.

Теперь, если я добавлю дочерний маршрут в app.routing.ts, он будет правильно маршрутизироваться. но когда я добавляю дочерние маршруты в другой модуль маршрутизации, он не направляется к этому компоненту и выдает ошибку:

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

ниже приведены некоторые из моих кодов:

1.app.routing.ts

Я прокомментировал маршруты детей, так как это работает.

 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: [
  ]
})

В моем основном компоненте у меня есть много горизонтальных вкладок навигационной панели, т. Е. Вкладка Java, которая ведет к sidenavbar с дочерними вкладками.

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 ({ импорт: [ RouterModule.forChild (JavaRoutes) ], экспорт: [ RouterModule ] })

4.Java.module.ts

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

Так что это моя структура папок

Answer 1

Вы также можете использовать loadChildren для таких ленивых модулей, как.

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

Я создал демоверсию stackblitz . Я надеюсь, что это поможет / руководство для вас / других.

Answer 2

Вы также можете использовать loadChildren для таких ленивых модулей, как.

Я создал демоверсию stackblitz . Я надеюсь, что это поможет / руководство для вас / других.

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

Answer 3

В вашем app.routing.ts вместо использования

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

использовать

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

Также замените

{path:'JAVACourse' , component: JavaComponentComponent ,

с

{path:'' , component: JavaComponentComponent ,

in java.routing.ts . Предполагая, что JavaModule - это имя модуля, которое находится в папке java.