Angular 7生产模式启动报错：Material及表单指令问题求助

刚接触Angular遇到这种生产模式专属的报错确实头疼，别担心，你的问题根源其实是模块导入的语法小错误——开发模式下Angular对这类问题有容错，但生产构建（--prod）会启用严格检查，所以才暴露出来。下面一步步帮你解决：

问题根源分析 #

看你的TransferMoneyModule代码，发现imports数组里有个嵌套数组写法：

[RouterModule.forChild(routes)]

Angular的imports接受的是单个模块实例的数组，嵌套数组会让Angular无法正确识别并加载路由模块，进而牵连其他依赖模块（表单、Material模块）在生产构建中无法正常引入，这就是开发模式正常但生产模式报错的核心原因。

具体修复步骤 #

1. 修正RouterModule的导入方式 #

把imports里的[RouterModule.forChild(routes)]改成直接写RouterModule.forChild(routes)，去掉外层的数组包裹：

修改后的完整TransferMoneyModule代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TransferMoneyComponent } from './transfer-money.component';
import { Routes, RouterModule } from '@angular/router';
import { DashboardHeaderModule } from '@component/dashboard-header/dashboard-header.module';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule} from '@angular/material/select';
import { CreditCardDirectivesModule } from 'angular-cc-library';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { NgKnifeModule } from 'ng-knife';
import { MatProgressSpinnerModule } from '@angular/material';
import { MatTabsModule } from '@angular/material/tabs';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatRadioModule } from '@angular/material/radio';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

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

@NgModule({
 declarations: [TransferMoneyComponent],
 imports: [
 CommonModule,
 NgbModule,
 RouterModule,
 DashboardHeaderModule,
 FormsModule,
 ReactiveFormsModule,
 MatFormFieldModule,
 MatInputModule,
 MatSelectModule,
 MatTableModule,
 MatPaginatorModule,
 NgKnifeModule,
 MatTabsModule,
 CreditCardDirectivesModule,
 MatProgressSpinnerModule,
 MatRadioModule,
 MatSlideToggleModule,
 // 去掉外层数组，直接写入路由模块实例
 RouterModule.forChild(routes)
 ]
})
export class TransferMoneyModule { }

2. 确认依赖模块的有效性 #

• 你已经正确导入了FormsModule和ReactiveFormsModule，这两个是支持ngModel、ngForm指令的核心，修复路由后它们会被正常加载，解决表单相关报错。
• MatFormFieldModule和MatInputModule已经包含了mat-error的定义，路由修复后mat-error会被正确识别。

验证修复效果 #

修改完成后，重新执行生产模式启动命令：

ng serve --prod

此时所有报错应该都会消失，项目能正常启动运行。

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