Angular公式チュートリアルでのエラー Error occurs in the template of component AppComponent.

Question

Angularの案件ん実務で関わることになったためAngularのチュートリアルをやっています。

Error occurs in the template of component AppComponent.このようなエラーが出てしまい、解決できずにこまっています。
Angularに詳しい方、ぜひご教授いただきたいです。

エラーの内容

$ ng serve
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js             | vendor        |   2.11 MB
polyfills.js          | polyfills     | 339.10 kB
styles.css, styles.js | styles        | 212.73 kB
main.js               | main          |  28.70 kB
runtime.js            | runtime       |   6.88 kB

                      | Initial Total |   2.69 MB

Build at: 2021-11-13T06:36:42.385Z - Hash: 008a154853e7aac3 - Time: 4816ms

Error: src/app/app.component.html:5:1 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5 <router-outlet></router-outlet>
  ~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

現在のソースコード

## app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';

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

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

<!-- app.component.html -->
<h1>{{title}}</h1>
<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>

試したこと

エラー文にIf 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.という記述があったため、app-routing.module.tsのimportの記述をimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';このような記述に変更してみましたが解決できませんでした。

宜しくお願いいたします。

Answer 1

AppRoutingModuleはAppModuleにimportされていますか？

AppComponentを読み込んでいるモジュールにRouterModuleが読み込まれていないときに出るエラーです。AppRoutingModuleでRouterModuleをexportしているので、以上の対応で動作するはず。

Answer 2

私も公式のチュートリアルをでエラーにはまってここに来たのですが、解決方法が書いてなかったので、追記します。

importsにAppRoutingModuleを追加すると出来ました。

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { FormsModule } from '@angular/forms';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { MessagesComponent } from './messages/messages.component'; // <-- NgModel lives here

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent,
    HeroDetailComponent,
    MessagesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular公式チュートリアル問題の個所

CLIを使って（ng generate module app-routing --flat --module=app）生成した際にimportは追加されたが、@NgModuleの中に定義は自動でされないものなのか良くわかりません。
チュートリアルには無い手順なので、手順通りにやるとエラーになるはず。。

Answer 3

以下の回答が参考にならないでしょうか。
過去回答
回答だけでなく、質問に書かれている内容（app.module.ts）も参考になるかも知れません。最近はAngularに触れてないので、ヒントだけで済みません。

Comments

[masaosan18]

ありがとうございます。すでに対応済ですが解決しませんでした。