看不到 router-outlet 是 Angular 组件 - router-outlet 不是已知元素
Cannot see that router-outlet is an Angular component - router-outlet is not a known element
我收到错误消息:
'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]
})
这是我的应用程序路由模块,仅供查看
app.routing
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);
导入RouterModule
模块并将其添加到imports
。
import { RouterModule } from '@angular/router'
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule,
AppRoutingModule
],
或者您的路由在 AppRoutingModule
中定义 - 您还需要从中导出 RouterModule
。
@NgModule({
...
imports: [ RouterModule ],
exports: [ RouterModule ]
...
})
export class AppRoutingModule { }
我收到错误消息:
'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]
})
这是我的应用程序路由模块,仅供查看
app.routing
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);
导入RouterModule
模块并将其添加到imports
。
import { RouterModule } from '@angular/router'
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule,
AppRoutingModule
],
或者您的路由在 AppRoutingModule
中定义 - 您还需要从中导出 RouterModule
。
@NgModule({
...
imports: [ RouterModule ],
exports: [ RouterModule ]
...
})
export class AppRoutingModule { }