Angular formGroup绑定报错：导入模块仍无效，懒加载组件不显示

核心问题分析 #

1. 直接指定component: AddEditComponent时报错：
   当在AccountsRoutingModule的路由中直接引用AddEditComponent时，该组件仅在AddEditModule中声明，但父模块（如AccountsModule）并未导入AddEditModule，导致ReactiveFormsModule提供的formGroup指令未在当前模块生效，编译时无法识别该属性。

2. 懒加载时组件不显示：
   AddEditModule错误导入了AccountsRoutingModule，引发路由配置冲突；同时懒加载模块缺少独立的路由配置，无法正确渲染组件。

具体修复步骤 #

步骤1：修正AddEditModule配置 #

• 移除BrowserModule导入（仅根模块AppModule可导入该模块）
• 删除AccountsRoutingModule的导入，避免路由冲突
• 仅保留必要模块的导入，无需导出FormsModule/ReactiveFormsModule（除非其他模块需要复用）

修改后的AddEditModule：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { Constants } from 'src/app/constants';

import { NGX_MAT_DATE_FORMATS, NgxMatDatetimePickerModule } from '@angular-material-components/datetime-picker';
import { NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, NgxMatMomentAdapter } from '@angular-material-components/moment-adapter';

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatTableModule } from '@angular/material/table';
import { MaterialModule } from 'src/app/material/material.module';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AddEditComponent } from './add-edit.component';
import { MatInputModule } from '@angular/material/input';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { AddEditRoutingModule } from './add-edit-routing.module'; // 新增独立路由模块

const CUSTOM_MOMENT_FORMATS = {
  parse: {
    dateInput:  Constants.dateFormat,
  },
  display: {
    dateInput: Constants.dateFormat,
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  declarations: [
    AddEditComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    AddEditRoutingModule, // 使用独立路由模块

    MaterialModule,
    MatInputModule,
    MatTableModule,
    MatDatepickerModule,
    MatFormFieldModule,
    NgxMatDatetimePickerModule,
  ],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS},
  ],
})
export class AddEditModule { }

步骤2：创建AddEditRoutingModule（独立路由） #

在add.edit目录下新建add-edit-routing.module.ts，配置默认路由指向AddEditComponent：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddEditComponent } from './add-edit.component';

const routes: Routes = [
  { path: '', component: AddEditComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AddEditRoutingModule { }

步骤3：修正父路由AccountsRoutingModule配置 #

启用懒加载配置，移除直接引用AddEditComponent的代码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { FunctionComponent } from './function.component';
import { ListComponent } from './list.component';
import { MainSchedulerComponent } from './main-scheduler/main-scheduler.component';
import { AutoGeneratorComponent } from './max-flow-schedules/auto-generator/auto-generator.component';
import { ScheduleAllocatorComponent } from './schedule.allocator.component';
import { UploadAccountsComponent } from './upload-accounts/upload-accounts.component';

const routes: Routes = [
    { path: '', component: ListComponent },
    { path: 'add', loadChildren: () => import('./add.edit/add.edit.module').then(m => m.AddEditModule) },
    { path: 'upload', component: UploadAccountsComponent},
    { path: 'auto-generate-schedules', component: AutoGeneratorComponent},
    { path: 'edit/:id', loadChildren: () => import('./add.edit/add.edit.module').then(m => m.AddEditModule) },
    { path: 'function/:id', component: FunctionComponent },
    { path: 'schedule/:id', component: ScheduleAllocatorComponent },
    { path: 'schedule-generate', component: MainSchedulerComponent},
    
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AccountsRoutingModule { }

步骤4：检查父模块声明 #

确认AccountsModule的declarations数组中未包含AddEditComponent（Angular组件只能在一个模块中声明）。

验证修复 #

1. 重新编译项目，确认formGroup报错消失
2. 访问/add或/edit/:id路由，确认AddEditComponent正常显示

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