Angular 2 ルーターで発生する "No base href set" エラーの原因と解決方法

2024-04-02

Angular 2 ルーターで発生する "No base href set" エラーの原因と解決方法

エラー概要

エラーの原因

このエラーは、以下のいずれかの原因によって発生します。

<base> 要素が存在しない
<base> 要素の href 属性が正しく設定されていない
APP_BASE_HREF トークンが正しく設定されていない

解決方法

このエラーを解決するには、以下のいずれかの方法を試します。

<base> 要素を追加する

HTML ファイルの <head> 要素内に、以下の <base> 要素を追加します。

<base href="/">

この <base> 要素は、ルーターにアプリケーションのベース URL を知らせます。

アプリケーションがサブディレクトリに配置されている場合は、<base> 要素の href 属性をサブディレクトリのパスに設定する必要があります。

例えば、アプリケーションが /app サブディレクトリに配置されている場合は、以下の <base> 要素を使用します。

<base href="/app/">

APP_BASE_HREF トークンを使用して、ベース URL をプログラム的に設定することができます。

import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: 'about', component: AboutComponent }
    ])
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

このコードでは、APP_BASE_HREF トークンに / という値を設定しています。

その他の注意事項

<base> 要素と APP_BASE_HREF トークンの両方を設定することはできません。
開発環境では、ng serve コマンドを実行する際に --base-href オプションを使用してベース URL を設定することができます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Angular 2 ルーターサンプル</title>
  <base href="/">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'Angular 2 ルーターサンプル';
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

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

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

}

<h1>ホーム</h1>

<p>これはホーム画面です。</p>

<a routerLink="/about">About ページへ</a>

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

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

}

<h1>About</h1>

<p>これはAboutページです.</p>

<a routerLink="/home">ホームへ</a>

実行方法

上記のコードをファイルに保存します。
npm install コマンドを実行して、必要なライブラリをインストールします。
ng serve コマンドを実行して、アプリケーションを起動します。
ブラウザで http://localhost:4200 を開きます。

説明

このサンプルコードでは、以下のことができます。

RouterModule.forRoot メソッドを使用して、ルーティング設定を定義します。
@Component デコレータを使用して、コンポーネントを定義します。
routerLink ディレクティブを使用して、ページ間のリンクを作成します。

このサンプルコードを参考に、Angular 2 ルーターを使用してアプリケーションを作成することができます。

Angular 2 ルーターで "No base href set" エラーを解決するその他の方法

@NgModule デコレータの entryComponents プロパティを使用して、ルーティングに使用されるコンポーネントを明示的に指定することができます。

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

HashLocationStrategy を使用する

デフォルトでは、Angular 2 ルーターは PathLocationStrategy を使用します。これは、URL のパス部分を使用してルーティングを行います。

HashLocationStrategy は、URL のハッシュ部分を使用してルーティングを行う別の戦略です。

import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: 'about', component: AboutComponent }
    ])
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }