AngularのHTML上でnavタグが認識されないときの原因と対処法

2024年10月5日

今回はAngularを使っていてAngularのHTML上でnavタグが認識されないときの原因と対処法についてご紹介していきます。

Angularのバージョンは18.0.6です。

AngularのHTML上でnavタグが認識されないときの原因と対処法

AngularのHTML上で

// sample.component.html
<nav>
  <a routerLink="/stores" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">店舗一覧</a>
  <a routerLink="/books" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">書籍一覧</a>
  <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">ホーム</a>
</nav>

// sample.component.html

<nav>

</nav>

のようにnavタグを使った表現を書いても、全然リンクとならず文字列として画面に表示されてしまうことがあります。

上記の原因としては、RouterModuleがインポートされていないことがほとんどの原因だと思います。

RouterModuleのインポートをapp.module.tsなどに追加しましょう。

// app.module.ts または該当のモジュールファイル
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router'; // RouterModule のインポート

import { AppComponent } from './app.component';
import { StoreListComponent } from './store-list/store-list.component';
import { BookListComponent } from './book-list/book-list.component';

const routes: Routes = [
  { path: '', component: StoreListComponent },  // ルートパスに店舗一覧を表示
  { path: 'stores', component: StoreListComponent },
  { path: 'books', component: BookListComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    StoreListComponent,
    BookListComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)  // RouterModule をインポートし、ルーティング設定を適用
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.module.ts または該当のモジュールファイル

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

import { BrowserModule } from '@angular/platform-browser';

import { RouterModule, Routes } from '@angular/router'; // RouterModule のインポート

import { AppComponent } from './app.component';

import { StoreListComponent } from './store-list/store-list.component';

import { BookListComponent } from './book-list/book-list.component';

const routes: Routes = [

{ path: '', component: StoreListComponent }, // ルートパスに店舗一覧を表示

{ path: 'stores', component: StoreListComponent },

{ path: 'books', component: BookListComponent },

];

@NgModule({

declarations: [

AppComponent,

StoreListComponent,

BookListComponent

imports: [

BrowserModule,

RouterModule.forRoot(routes) // RouterModule をインポートし、ルーティング設定を適用

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Angular18であればスタンドアロンコンポーネントの機能を使っている場合があり、その場合は各コンポーネントでインポートして使う必要があります。

// home.component.ts
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [RouterModule],  // ルーター機能をインポート
  template: `
    <nav>
      <a routerLink="/stores" routerLinkActive="active">店舗一覧</a>
      <a routerLink="/books" routerLinkActive="active">書籍一覧</a>
      <a routerLink="/" routerLinkActive="active">ホーム</a>
    </nav>
    <router-outlet></router-outlet>  <!-- コンポーネントを表示する場所 -->
  `
})
export class HomeComponent {}