Angular生产构建报错：找不到rxjs模块及组件模板错误

问题背景 #

通过buildAndRun.bat脚本运行程序，脚本流程为：清理Maven → 安装Node和NPM（未安装时）→ 执行ng build --configuration production。前序步骤均正常，但构建时抛出错误：找不到模块M:Application Production\frontend\node_modules\@angular-devkit\core\node_modules\rxjs\dist\cjs\index.js，原因是rxjs目录下无dist文件夹。

当前环境版本：

• Node 18.16.1
• npm 9.7.2
• @angular-devkit相关版本：0.1601.4 ~ 16.1.5
• rxjs 6.5.5

已尝试重装@angular-devkit、重新安装Node，均无效；一周前项目可正常构建，未做任何代码或配置修改。

尝试@MatthieuRiegler方案后的新问题 #

执行方案后，出现组件模板错误：

• HeaderComponent中form的formGroup绑定无效
• HomeComponent中input的ngModel绑定无效
• date管道未找到

项目package.json配置 #

{
    "name": "angular-nodejs-example",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "16.1.7",
        "@angular/common": "16.1.7",
        "@angular/compiler": "16.1.7",
        "@angular/core": "16.1.7",
        "@angular/forms": "16.1.7",
        "@angular/platform-browser": "16.1.7",
        "@angular/platform-browser-dynamic": "16.1.7",
        "@angular/router": "16.1.7",
        "@canvasjs/angular-charts": "^1.0.3",
        "@canvasjs/charts": "^3.7.12",
        "@fullcalendar/angular": "^6.1.8",
        "@fullcalendar/core": "^6.1.8",
        "@fullcalendar/daygrid": "^6.1.8",
        "@fullcalendar/timegrid": "^6.1.8",
        "@ng-bootstrap/ng-bootstrap": "^15.1.0",
        "@ngrx/effects": "^16.0.0",
        "@ngrx/entity": "^16.0.0",
        "@ngrx/router-store": "^16.0.0",
        "@ngrx/store": "^16.0.0",
        "@ngrx/store-devtools": "^16.0.0",
        "@popperjs/core": "^2.11.8",
        "angular-oauth2-oidc": "^15.0.1",
        "bootstrap": "4.1.1",
        "canvasjs": "^1.8.3",
        "ngrx": "0.0.1-security",
        "ngrx-store-freeze": "^0.2.4",
        "ngrx-store-localstorage": "^16.0.0",
        "rxjs": "~6.5.4",
        "tslib": "^2.0.0",
        "typescript": "^4.8.4",
        "zone.js": "~0.13.0"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "16.1.4",
        "@angular/cli": "16.1.5",
        "@angular/compiler-cli": "16.1.7",
        "@angular/language-service": "16.1.6",
        "@types/jasmine": "~3.5.0",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "codelyzer": "^6.0.2",
        "jasmine-core": "3.8.0",
        "jasmine-spec-reporter": "~5.0.0",
        "karma": "~6.4.2",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "protractor": "~7.0.0",
        "ts-node": "~8.3.0",
        "tslint": "~6.1.0"
    }
}

排查与解决步骤 #

一、解决初始rxjs缺失dist文件夹问题 #

1. 清理缓存并重装依赖
   Windows环境执行：

   rd /s /q node_modules
   del package-lock.json
   npm cache clean --force
   npm install
   

   类Unix环境执行：

   rm -rf node_modules package-lock.json
   npm cache clean --force
   npm install
   

2. 修复rxjs版本兼容性
   Angular 16.x官方要求rxjs版本为~7.8.0，当前项目rxjs~6.5.4版本过低，直接导致依赖不匹配：

   npm install rxjs@~7.8.0 --save
   

3. 统一@angular-devkit版本
   @angular-devkit/build-angular版本16.1.4与Angular核心版本16.1.7存在差异，建议统一：

   npm install @angular-devkit/build-angular@16.1.7 --save-dev
   

二、解决后续模板绑定错误问题 #

所有模板错误均为对应模块未导入必要Angular模块导致：

1. formGroup/ngModel绑定无效：在使用这些组件的模块中导入ReactiveFormsModule和FormsModule

   import { ReactiveFormsModule, FormsModule } from '@angular/forms';
   
   @NgModule({
     imports: [
       // 其他已导入模块
       ReactiveFormsModule,
       FormsModule
     ]
   })
   export class TargetModule { }
   

2. date管道未找到：在对应模块中导入CommonModule（特性模块）或BrowserModule（根模块）

   import { CommonModule } from '@angular/common';
   
   @NgModule({
     imports: [
       // 其他已导入模块
       CommonModule
     ]
   })
   export class TargetModule { }
   

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