2

私はこの問題に対する答えを見つけようと探し回っていますが、できません。これがすでに尋ねられている場合は申し訳ありません!

単一のスパを使用して基本的なhtmlページにインポートするいくつかの小さなAngular 9アプリを作成しました。ローカルのさまざまなポートでアプリを実行しています。インポート ステートメントは次のようになります。

  <script type="systemjs-importmap">
  {
    "imports": {
      "footer": "http://localhost:4201/main.js",
      "dashboard": "http://localhost:4202/main.js",
      "header": "http://localhost:4300/main.js",
      "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.5/system/single-spa.min.js"
    }
  }
</script>

そして、アプリが異なるルートで表示されるように、html ページにルートを設定しています。これは、インポートしているアプリケーションの登録からの 1 つの項目です。

    System.import('single-spa').then(function (singleSpa) {
  singleSpa.registerApplication(
    'header',
    function () {
      return System.import('header');
    },
    function (location) {
      return location.pathname.startsWith('/header');
      // return true;
    }
  )

これはすべてうまく機能し、私の単純なアプリは正常に表示されます。単純なアプリにいくつかの子ページを追加してメインの「シェル」アプリにルーティングしようとすると、問題が発生します。「localhost:4200/header」に移動すると、インポートした「ヘッダー」アプリが正しく表示されます。そのアプリ内で子ページに移動しようとすると、たとえば、「ヘッダー」アプリ「app-routing-module」で設定したこの子ルート:

  { path: '**', component: EmptyRouteComponent, children: [
{path: 'sub-details', component: DetailsComponent}

] }、

何も起こりません。<router-outlet></router-outlet>「ヘッダー」アプリのランディング ページに次のようなリンクがあります。<a [routerLink]="['./dets']">Dets</a>ただし、メイン アプリで「localhost:4200/header/dets」にルーティングする代わりに、「localhost:4200/dets」への角度ルートをルーティングします。存在しません。私が欠けているものについて何か考えがある人はいますか? どんな助けでも大歓迎です！

4

1 に答える 1