1つのangular app内の複数のプロジェクトを経由するルーティング

Question

1つの子アプリケーションを持つメインアプリケーションがあります。メインアプリケーションにあるアンカーリンクをクリックしたときに、子アプリケーションを表示する必要があります。しかし、それは機能していません。

プロジェクト構造：

one-app
-project
--scrapper
---e2e
---src
-src

子アプリのルーティングモジュールに、次のようなルートを追加しました

const routes: Routes = [
  { path: '', component: HomeComponent}
];

子アプリのアプリコンポーネント

<router-outlet></router-outlet>

子アプリのアプリモジュールで、以下のコードに既存のコードを追加しました

@NgModule({})
export class ScrapperSharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AppModule,
      providers: []
    };
  }
}

これまでのところすべてが良好です。私は推測する！！

親アプリのルーティングで、以下のコードを追加しました

{ path: 'scrapper',
    loadChildren: '../../projects/scrapper/src/app/app.module#ScrapperSharedModule'
}

親アプリのアプリモジュールで、ngmoduleパーツに以下のコードをインポートしました

imports: [
...
ScrapperSharedModule.forRoot(),
]

今、私の親アプリのコンポーネントの1つに、アンカータグがあります。

<a routerLink="/scrapper">

このリンクをクリックしても、何も起こりません。つまり、URLは変更されますが、ブラウザには子アプリではなく親アプリが表示されます。ここで何が悪いのですか？

Answer 1

説明に基づいて、基本的には両方のアプリケーションがSPAパターンで機能する必要があります。

その場合、このアーティカル（ https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one -e87d530d6527 ）