Angular子模块使用ngIf触发NG0303错误，求排查方案

我开发的Angular应用采用组件化架构，创建了带独立路由的自定义子模块ProjectsModule，但在渲染该模块的project-list.component时，触发了如下错误：

NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div'.

相关代码片段 #

存在问题的模板代码（project-list.component.html） #

<div class="projects" *ngIf="projects">
  <app-project-bloc *ngFor="let project of projects"
                    [project]="project"
                    [routerLink]="[project.shortname]"
  ></app-project-bloc>
</div>

ProjectsModule代码 #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ProjectListComponent} from "./pages/project-list/project-list.component";
import {ProjectBlocComponent} from "./components/project-bloc/project-bloc.component";
import {ProjectPageComponent} from "./pages/project-page/project-page.component";
import {RouterModule} from "@angular/router";

@NgModule({
  declarations: [
    ProjectListComponent,
    ProjectBlocComponent,
    ProjectPageComponent
  ],
  imports: [
    CommonModule,
    RouterModule
  ]
})
export class ProjectsModule { }

AppModule代码 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingComponent } from './components/landing/landing.component';
import { MenuComponent } from './components/menu/menu.component';
import { CareerComponent } from './components/career/career.component';
import { GetInTouchComponent } from './components/get-in-touch/get-in-touch.component';
import { WritingsComponent } from './components/writings/writings.component';
import {CommonModule} from "@angular/common";
import {ProjectsModule} from "./components/projects/projects.module";

@NgModule({
  declarations: [
    AppComponent,
    LandingComponent,
    MenuComponent,
    CareerComponent,
    GetInTouchComponent,
    WritingsComponent,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,
    ProjectsModule
  ],
  providers: [],
  exports: [
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题原因与解决方案 #

问题核心 #

你的ProjectsModule虽然导入了CommonModule（提供*ngIf等内置指令），但**RouterModule未配置该模块的路由规则**。Angular加载子模块路由组件时，无法正确关联模块的声明与依赖，导致组件无法识别CommonModule提供的指令。

修复方案 #

在ProjectsModule的RouterModule导入中，通过forChild()方法配置该模块的路由规则：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ProjectListComponent} from "./pages/project-list/project-list.component";
import {ProjectBlocComponent} from "./components/project-bloc/project-bloc.component";
import {ProjectPageComponent} from "./pages/project-page/project-page.component";
import { RouterModule, Routes } from '@angular/router';

// 定义子模块路由规则
const routes: Routes = [
  { path: '', component: ProjectListComponent },
  { path: ':shortname', component: ProjectPageComponent }
];

@NgModule({
  declarations: [
    ProjectListComponent,
    ProjectBlocComponent,
    ProjectPageComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes) // 配置子模块路由
  ]
})
export class ProjectsModule { }

配置完成后，Angular会正确关联模块内组件与依赖的CommonModule，*ngIf指令即可正常工作。

内容的提问来源于stack exchange，提问作者Louis 'LYRO' Dupont