错误：NG8001：“路由器出口”不是已知元素：在 Angular 中

Question

我收到以下错误：

NG8001：

router-outlet

不是已知元素：
如果

router-outlet

是 Angular 组件，则验证它是否是该模块的一部分。
如果

router-outlet

是 Web 组件，则将

CUSTOM_ELEMENTS_SCHEMA

添加到该组件的

@NgModule.schemas

以抑制此消息。 [插件角度编译器]

src/app/app.component.html:0:0:
  0 │
    ╵ ^

组件模板出现错误

AppComponent

。

src/app/app.component.ts:5:15:
  5 │   templateUrl: './app.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~`

我已经在

AppRoutingModule

中添加了

app.module

，但我仍然遇到这个问题。

应用程序.模块文件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
// import { HomeComponent } from './home/home.component';
// import { HeaderComponent } from './header/header.component';
// import { MovieComponent } from './movie/movie.component';
import { HttpClientModule } from '@angular/common/http';
//import { FeatureModule } from './feature/feature.module';
import { AppRoutingModule } from './app.routes';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
    // HomeComponent,
    // HeaderComponent,
    // MovieComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    AppRoutingModule,
    //FeatureModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routes.ts 文件

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { MovieComponent } from './movie/movie.component';


export const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full'},
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'movie/:type/:id', component: MovieComponent },
  { path: '**', component: LoginComponent }
];

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

console.log('AppRoutingModule loaded');

---

我正在使用以下版本：

 "@angular/animations": "^18.2.0",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
    "bootstrap": "^5.3.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
    "@angular-devkit/build-angular": "^18.2.1",
    "@angular/cli": "^18.2.1",
    "@angular/compiler-cli": "^18.2.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.2"

Answer 1

尝试在 AppModule 导入中添加

RouterOutlet

中的

@angular/router

，例如：

从'@angular/router'导入{RouterOutlet}；

导入：[RouterOutlet]