Ionic 5标签页应用热重载报错：无法绑定Angular结构指令

问题说明 #

开发Ionic 5标签页应用期间，修改代码后在非首页触发自动热重载，会出现*ngFor这类Angular内置指令失效的问题。已经在对应页面的模块中导入了CommonModule、FormsModule和IonicModule，但问题依然存在，目前只能通过回到首页重载应用临时解决。

涉及代码片段 #

1. new-article页面HTML（路径：src/app/pages/new-article/new-article.page.html）

<ion-grid>
  <ion-row>
    <ion-col *ngFor="let url of artcile.photos"><img [src]="url"/></ion-col>
  </ion-row>
</ion-grid>

2. new-article页面模块（路径：src/app/pages/new-article/new-article.module.ts）

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    NewArticlePageRoutingModule
  ],
  declarations: [NewArticlePage]
})
export class NewArticlePageModule {}

3. 标签页路由配置（路径：src/app/tabs/tabs-routing.module.ts）

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('../pages/home/home.module').then(m => m.HomePageModule)
      },
      ...
      {
        path: 'new-article',
        loadChildren: () => import('../pages/new-article/new-article-routing.module').then(m => m.NewArticlePageRoutingModule)
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

问题根源 #

在tabs-routing.module.ts的子路由配置里，loadChildren导入的是页面的路由模块（比如new-article-routing.module.ts），而不是页面的主模块（new-article.module.ts）。这会导致Angular无法正确加载主模块中导入的CommonModule——*ngFor等内置指令正是定义在这个模块里，热重载时这个问题会被触发。

解决方法 #

修改tabs-routing.module.ts里所有子路由的loadChildren配置，把导入的路由模块替换成对应的页面主模块：

以new-article页面为例，修改后的路由配置：

{
  path: 'new-article',
  loadChildren: () => import('../pages/new-article/new-article.module').then(m => m.NewArticlePageModule)
}

对所有标签页下的子页面路由执行同样修改，确保每个页面都通过主模块加载。这样Angular就能正确识别并加载CommonModule等依赖，热重载时*ngFor等指令就能正常工作了。

内容的提问来源于stack exchange，提问作者Lorenzo D'Isidoro