Angular 15 - 在独立组件中获取 RouterOutlet 错误

Question

我运行 Angular 项目时遇到错误。

X [错误] NG8001：“路由器插座”不是已知元素： 如果“router-outlet”是 Angular 组件，则验证它是否是该模块的一部分。 如果“router-outlet”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。 [插件角度编译器]

这里是app.component.html：

<router-outlet></router-outlet>

这里是app.component.ts：

import {Component, OnInit} from '@angular/core';
import {Router, RouterOutlet} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit{
  title = 'Docs';

  constructor(private _router: Router) {
  }
  ngOnInit() {
    this._router.navigate(['upload-pdf']).then(r=>console.log(r))
  }
}

这里是app-routing.module.ts：

import { NgModule } from '@angular/core';
import {RouterModule, RouterOutlet, Routes} from '@angular/router';
import {AppComponent} from "./app.component";
import {PdfComponent} from "../pdf/pdf.component";
import {UploadPdfComponent} from "../upload-pdf/upload-pdf.component";

export const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'pdf', component: PdfComponent},
  { path: 'upload-pdf', component: UploadPdfComponent},
  { path: '**', component: AppComponent },
]

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

export class AppRoutingModule {
}

这里是app.module.ts：

import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import {PdfComponent} from "../pdf/pdf.component";
import {UploadPdfComponent} from "../upload-pdf/upload-pdf.component";
import {FormsModule} from "@angular/forms";
import {MatFileUploadComponent, MatFileUploadModule, MatFileUploadQueueComponent} from "angular-material-fileupload";
import {RouterOutlet} from "@angular/router";
import {AppComponent} from "./app.component";

@NgModule({
  declarations: [
    AppComponent,
    PdfComponent,
    UploadPdfComponent,
    MatFileUploadComponent,
    MatFileUploadQueueComponent
  ],
  imports: [
    CommonModule,
    AppRoutingModule,
    FormsModule,
    MatFileUploadModule,
    RouterOutlet
  ],
  exports:[
    AppComponent
  ]
})
export class AppModule { }

这里是app.config.ts：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app-routing.module';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

将组件转为独立后，此错误消失。如何通过其他解决方案解决此错误？

Answer 1

提到的错误表明您需要在

RouterModule

中导入

AppComponent

。

import {Router, RouterModule} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  imports: [RouterModule]
})
export class AppComponent { }

并删除

RouterOutlet

和

AppRoutingModule

中的

AppModule

的导入，因为它是不需要的。

对于独立组件，您可以导入

RouterOutlet

数组中的

imports

。

import {Router, RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  imports: [RouterOutlet]
})
export class AppComponent { }