导入NgModule后<router-outlet>等组件失效，报未知元素错误

问题场景 #

搭建电商网站时，新增AddProductComponent用于表单添加新产品，在app.module.ts中导入NgModule后，所有使用<router-outlet>、自定义组件的位置均报错，错误提示如下：

"'****' is not a known element:

1. If '****' is an Angular component, then verify that it is part of this module.
2. If '****' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message."

相关代码 #

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ProductListComponent } from './components/product-list/product-list.component';
import { HttpClientModule } from '@angular/common/http'
import { ProductService } from './services/product.service';
import { Routes, RouterModule } from '@angular/router';
import { ProductCategoryMenuComponent } from './components/product-category-menu/product-category-menu.component';
import { SearchComponent } from './components/search/search.component';
import { ProductDetailsComponent } from './components/product-details/product-details.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AddProductComponent } from './components/add-product/add-product.component';

const routes: Routes = [
  {path:'products/:id', component: ProductDetailsComponent},
  {path:'search/:keyword', component: ProductListComponent},
  {path:'category/:id', component: ProductListComponent},
  {path:'category', component: ProductListComponent},
  {path:'products', component: ProductListComponent},
  {path:'', redirectTo:'/products', pathMatch: 'full'},
  {path:'**', redirectTo:'/products', pathMatch: 'full'},
];

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    ProductCategoryMenuComponent,
    SearchComponent,
    ProductDetailsComponent,
    AddProductComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
    NgbModule,
    NgModule <--New Import
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

add-product.component.html #

<form>
    <div>
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" placeholder="name" name="name" [(ngModel)]="product.name">
    </div>
</form>

product-list-grid.component.html #

<div class="main-content">
  <div class="section-content section-content-p30">
    <div class="container-fluid">
      <div class="row">

        <div *ngFor="let tempProduct of products" class="col-md-3">
          <div class="product-box">

            <a routerLink="/products/{{tempProduct.id }}">
              <img src="{{ tempProduct.imageUrl }}" class="img-responsive">
            </a>
            <a routerLink="/products/{{tempProduct.id }}">
              <h1> {{ tempProduct.name }}</h1>
            </a>

            <div class="price">{{ tempProduct.unitPrice | currency:'EUR' }}</div>
            <div *ngIf="tempProduct.active" class="active-item">
              Na raspolaganju
            </div>
            <div *ngIf="!tempProduct.active" class="inactive-item">
              Nedostupno, u dolasku
            </div>
            <a href="#" class="primary-btn">Add to cart</a>
          </div>
        </div>

      </div>

      <div class="footer-pagination">
        <div class="row">
          <div class="col-md-6">
          </div>
          <div class="col-md-6">
            <div class="row">
              <div class="col-md-9" style="padding-left: 30%">
                <ngb-pagination [(page)]="thePageNumber"
                                [pageSize]="thePageSize"
                                [collectionSize]="theTotalElements"
                                [maxSize]="1"
                                [boundaryLinks]="true"
                                (pageChange)="listProducts()">
                </ngb-pagination>
              </div>

              <span class="mr-2">Page size</span>

              <select #myPageSelect (change)="updatePageSize(myPageSelect.value)">
                <option>1</option>
                <option selected="true">5</option>
                <option>10</option>
                <option>25</option>
                <option>50</option>
              </select>
            </div>

    </div>
  </div>
</div>

app.component.html #

<div class="page-wrapper">

  <!-- MENU SIDEBAR-->
  <aside class="menu-sidebar d-none d-lg-block">
    <div class="logo">
      <a href="#">
        <img src="assets/images/logo.png" alt="Name of my shop" class="img-responsive">
      </a>
    </div>
    <app-product-category-menu></app-product-category-menu> <--Red squiggly line
  </aside>

  <!-- HEADER -->

  <div class="page-container">
    <header class="header-desktop">
      <div class="section-content section-content-p30">
        <div class="container-fluid">
          <div class="header-wrap">
            
            <app-search></app-search> <--Red squiggly line
            
            <div class="cart-area d-n">
              <a href="shopping-detail.html">
                <div class="total">19.22 <span> 2</span> </div> <i class="fa fa-shopping-cart" aria-hidden="true"></i>
              </a>
            </div>
          </div>
          <div class="account-wrap"></div>
        </div>
      </div>
    </header>

    <!-- MAIN CONTENT-->
    <router-outlet></router-outlet> <--Red squiggly line

    <app-add-product></app-add-product> <--Red squiggly line

  </div>
</div>

<!-- FOOTER -->
<footer>
  <ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Help</a></li>
  </ul>
</footer>

解决方案 #

核心问题 #

错误根源是在app.module.ts的imports数组中错误添加了NgModule——NgModule是用于装饰模块的装饰器，不属于需要导入的模块类，这会破坏Angular模块的正常解析逻辑。另外，add-product.component.html使用了[(ngModel)]双向绑定，但未导入对应的FormsModule。

修复步骤 #

1. 打开app.module.ts，删除imports数组中的NgModule <--New Import这一行。
2. 从@angular/forms导入FormsModule，并添加到imports数组中，支持双向绑定功能。

修复后的app.module.ts关键部分如下：

// 新增FormsModule导入
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    // 保持原有声明不变
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
    NgbModule,
    FormsModule // 新增FormsModule
    // 移除了错误的NgModule导入
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 保存代码后，重启Angular开发服务器，错误即可消除。

内容的提问来源于stack exchange，提问作者user13372981