angular - 単一スパのAngularアプリの子ルーティングが機能しない

Question

単一スパのルート構成アプリと、角度で実装された他の 2 つの子アプリを ( parcelsを使用して) セットアップしました。そして、ルートアプリから子アプリのルートに移動しようとしていますが、最初のルート/app1では機能しますが、そこから移動したい場合、/app1/searchまたは/app1/details関連付けられたコンポーネントをロードしない場合は、URL が変更されます。

最初にヒット/app1/searchすると検索コンポーネントが読み込まれますが、その後、他のルートに移動しようとすると/app1/<any-route>、URL が変更されますが、コンポーネントは読み込まれません。

ルート構成 app.component.html

<a routerLink="/app1" routerLinkActive="active">App1 Home</a>
<a routerLink="/app1/search" routerLinkActive="active">App1 Search</a>
<a routerLink="/app1/details" routerLinkActive="active">App1 Details</a>
<a routerLink="/app2" routerLinkActive="active">App2 Home</a>


<router-outlet></router-outlet>

App1 ルート モジュール:

const routes: Routes = [
  {
    path: 'app1',
    children: [
      {
        path: '',
        component: HomeComponent
      },
      {
        path: 'search',
        component: SearchComponent
      }, {
        path: 'details',
        component: DetailsComponent
      }]
  }, {
    path: '**',
    component: EmptyRouteComponent
  }
];

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