javascript - 看不到 router-outlet 是 Angular 组件 - router-outlet 不是已知元素

Question

我收到错误:

'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. ("<div class="container">
        [ERROR ->]<router-outlet></router-outlet>
    </div>

但我想不通为什么。我所做的就是将我的 app.component.html 从:这个

<div class="container">
    <app-login></app-login>
</div>

对此

<div class="container">
    <router-outlet></router-outlet>
</div>

这是我的应用模块app.module

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomepageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [
    AuthService,
    AuthGuard,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppHttpInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

这是我的应用程序路由模块，仅供查看

应用路由

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

import {HomepageComponent} from './components/homepage/homepage.component';
import {LoginComponent} from './components/login/login.component';
import {AuthGuard} from './guard/auth.guard';

const appRoutes: Routes = [
  {path: '', component: HomepageComponent, canActivate: [AuthGuard]},
  {path: 'login', component: LoginComponent},

  // Otherwise redirect to home
  {path: '**', redirectTo: ''}
];

export const AppRoutingModule = RouterModule.forRoot(appRoutes);

Answer 1

导入RouterModule模块并将其添加到imports中。

import { RouterModule } from '@angular/router'

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule,
    AppRoutingModule
],

或者您的路由在 AppRoutingModule 中定义 - 您还需要从中导出 RouterModule。

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