Angular添加懒加载后出现Can't bind to 'ngForOf'错误求助

问题描述 #

在products-list.component.html模板中使用*ngFor指令，已在products-list.module.ts中导入CommonModule，且仅在app.module.ts中导入一次BrowserModule，确认*ngFor语法无误，但仍报错：

Can't bind to 'ngForOf' since it isn't a known property of 'div' (used in the 'ProductsListComponent' component template)

问题出现于添加懒加载功能之后。

相关代码 #

products-list.component.html

<app-navbar></app-navbar>
<div class="products-list">
    <h3 class="products-list__header">Products</h3>
    <div class="products-list__products">
        <div class="product-card" *ngFor="let product of products">
            <a (click)="goToProductDetails(product.id)" >
                <img class="product-card__img" [src]="product.image | safePipe" />
                <div class="product-card__price">$ {{product.price}}</div>
                <div class="product-card__name">{{product.name}}</div>
                <button (click)="addToCart($event, product)"class="product-card__button" type="button">Add To Cart</button>
            </a>
        </div>
    </div>
</div>

products-list.module.ts

import { SafepipeModule } from './../../safepipe/safepipe.module';
import { FormsModule } from '@angular/forms';
import { NavbarModule } from 'src/app/components/navbar/navbar.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductsListRoutingModule } from './products-list-routing.module';
import { ProductsListComponent } from './products-list.component';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [ProductsListComponent],
  imports: [
    CommonModule,
    ProductsListRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    NavbarModule,
  ],
  exports:[ProductsListComponent]
})
export class ProductsListModule { }

解决方案 #

• 校验懒加载路由配置
  确保app-routing.module.ts中通过loadChildren引入ProductsListModule，而非直接在AppModule中导入该模块或组件：

  const routes: Routes = [
    {
      path: 'products',
      loadChildren: () => import('./path/to/products-list/products-list.module').then(m => m.ProductsListModule)
    }
    // 其他路由...
  ];
  

  禁止在AppModule的declarations或imports数组中包含ProductsListComponent或ProductsListModule，否则会导致模块重复注册，指令无法被正确识别。

• 排查模块重复导入问题
  检查项目中其他模块（如共享模块、其他功能模块）是否意外导入了ProductsListModule，破坏了模块的隔离性，导致Angular无法正确解析模块内的指令。

• 清理缓存并重启服务
  懒加载配置变更后，Angular的编译缓存可能残留旧数据，执行以下命令清理并重启开发服务器：

  ng clean
  ng serve
  

• 确认CommonModule导入有效性
  再次核对products-list.module.ts：

  • 确保CommonModule从@angular/common正确导入，无拼写错误
  • 确认imports数组中CommonModule未被注释或遗漏

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