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 {  }

无法看到路由器出口是Angular组件-路由器出口不是已知元素

1 个答案: