Angular2 Router エラー: 'HomePage' を読み込むためのプライマリアウトレットが見つかりません。の原因と解決策

2024-06-29

Angular2 Router エラー: 'HomePage' を読み込むためのプライマリアウトレットが見つかりません。

このエラーが発生する主な理由は 2 つあります。

RouterOutlet ディレクティブは、Angular がルーティングされたコンポーネントをレンダリングする場所を指定するために使用されます。このディレクティブがアプリケーションのルートコンポーネントのテンプレートに含まれていない場合、このエラーが発生します。

解決策：

アプリケーションのルートコンポーネントのテンプレートに <router-outlet> タグを追加します。

例：

<app-root>
  <router-outlet></router-outlet>
</app-root>

ROUTER_DIRECTIVES アレイは、Angular がルーティングで使用されるディレクティブを認識するために使用されます。このアレイに RouterOutlet ディレクティブが含まれていない場合、このエラーが発生します。

アプリケーションのブートストラップモジュールで ROUTER_DIRECTIVES アレイを正しく設定します。

import { NgModule } from '@angular/core';
import { RouterModule, RouterOutlet } from '@angular/router';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'about', component: AboutComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

上記に加えて、このエラーは次のような原因でも発生する可能性があります。

要素セレクタに誤字脱字がある
コンポーネントのテンプレートが誤っている
ルーティング設定が間違っている

デバッグ

このエラーをデバッグするには、次の手順を実行します。

ブラウザの開発者ツールのコンソールを確認して、エラーメッセージを確認します。
エラーメッセージで指定されているコンポーネントとテンプレートを確認します。
RouterOutlet ディレクティブが正しく使用されていることを確認します。
ROUTER_DIRECTIVES アレイが正しく設定されていることを確認します。
要素セレクタ、コンポーネントテンプレート、およびルーティング設定に誤りがないことを確認します。

app.component.html

<app-root>
  <h1>MyApp</h1>
  <nav>
    <a routerLink="/">Home</a>
    <a routerLink="/about">About</a>
  </nav>
  <router-outlet></router-outlet>
</app-root>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { }

<h2>Home</h2>
<p>Welcome to my home page!</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent { }

<h2>About</h2>
<p>This is my about page.</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html'
})
export class AboutComponent { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

このコードを実行すると、次のようになります。

アプリケーションのルートパス (/) にアクセスすると、HomeComponent コンポーネントが表示されます。

このコードは、Angular 2 アプリケーションでルーティングを使用する方法のほんの一例です。詳細については、Angular 2 ルーターのドキュメントを参照してください。

Angular 2 Router エラー: 'HomePage' を読み込むためのプライマリアウトレットが見つかりません。を解決するその他の方法

Lazy Loading を使用すると、必要なときにのみコンポーネントをロードできます。これにより、アプリケーションのパフォーマンスが向上し、メモリ使用量が削減されます。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

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