路由器插座"不是已知元素

Question

看起来这是一个非常常见的问题。我试着从其他答案中寻求帮助，但我还是犯了这个错误。这是我的代码：

产品路由模块.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LaptopComponent } from './laptop/laptop.component';
import { MobileComponent } from './mobile/mobile.component';
import { ProductsComponent } from './products.component';
const routes: Routes = [
{
path: 'products',
component: ProductsComponent,
children: [
{ path: 'laptops', component: LaptopComponent },
{ path: 'mobiles', component: MobileComponent },
],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ProductsRoutingModule {}

products.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LaptopComponent } from './laptop/laptop.component';
import { MobileComponent } from './mobile/mobile.component';
import { ProductsRoutingModule } from './products-routing.module';
@NgModule({
imports: [CommonModule, ProductsRoutingModule],
declarations: [LaptopComponent, MobileComponent],
})
export class ProductsModule {}

products.component.html

<h1>Products</h1>
<ul>
<li routerLink="laptops">Laptops</li>
<li routerLink="mobiles">Mobiles</li>
</ul>
<router-outlet></router-outlet>

这是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ProductsModule } from './products/products.module';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
imports: [BrowserModule, FormsModule, AppRoutingModule, ProductsModule],
declarations: [AppComponent, HelloComponent],
bootstrap: [AppComponent],
})
export class AppModule {}

你能指出我的错误吗。给我一堆同样的东西。

Answer 1

出现此问题是因为任何模块都未声明ProductsComponent。如果将其添加到products.module.ts:中的声明中，问题就会消失

@NgModule({
imports: [CommonModule, ProductsRoutingModule],
declarations: [ProductsComponent, LaptopComponent, MobileComponent],
})
export class ProductsModule {}