Angular12.2项目迁移后所有视图变量数据绑定失效问题求助

我有一个迁移至Angular 12.2的项目，package.json文件配置如下：

{
  "name": "xxxx",
  "version": "1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular-slider/ngx-slider": "^2.0.3",
    "@angular/animations": "~12.2.0",
    "@angular/cdk": "^12.2.11",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "@angularclass/hmr": "^3.0.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@types/geojson": "^7946.0.8",
    "@types/googlemaps": "^3.39.12",
    "angular-2-local-storage": "^3.0.2",
    "angular2-highcharts": "^0.5.5",
    "angular2-query-builder": "^0.6.2",
    "animate.css": "^4.1.1",
    "chart.js": "^3.6.0",
    "core-js": "^3.19.0",
    "d3-array": "^3.1.1",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "fullcalendar": "^5.10.0",
    "geojson": "^0.5.0",
    "gzip-all": "^1.0.0",
    "highcharts": "^9.3.0",
    "jexl": "^2.3.0",
    "jquery": "^3.6.0",
    "jsbarcode": "^3.11.5",
    "moment": "^2.29.1",
    "nanoscroller": "^0.8.7",
    "ng2-dragula": "^2.1.1",
    "ngx-localized-numbers": "^0.4.1",
    "ngx-schema-form": "^2.6.6",
    "node-sass": "^6.0.1",
    "pg": "^8.7.1",
    "primeicons": "^4.1.0",
    "primeng": "^12.2.1",
    "quill": "^1.3.7",
    "rxjs": "~6.6.0",
    "ts-helpers": "^1.1.2",
    "tslib": "^2.3.0",
    "typescript": "^4.2.4",
    "uuid": "^8.3.2",
    "venn.js": "^0.2.20",
    "xlsx": "^0.17.3",
    "z-schema": "^4.2.4",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.11",
    "@angular/cli": "~12.2.11",
    "@angular/compiler-cli": "~12.2.0",
    "@angular/language-service": "^12.2.11",
    "@types/angular": "^1.8.3",
    "@types/jasmine": "~3.8.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/jquery": "^3.5.8",
    "@types/node": "^12.20.36",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "^7.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "protractor": "^7.0.0",
    "ts-node": "^10.4.0"
  }
}

tsconfig.app.json文件配置如下：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["googlemaps","jquery","node"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.json文件配置如下：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2018","dom"],
    "module": "es2020",
    "moduleResolution": "node",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "target": "es2017",
    "typeRoots": ["./node_modules/@types"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    //"enableIvy": false,
    "strictDomEventTypes": false
  }
}

目前所有视图的所有变量都未实现数据绑定，相同配置在Angular 10项目上可以正常运行，请问是什么原因导致的？

Angular 12 默认强制启用 Ivy 编译器，而你原 Angular 10 项目使用的是 View Engine 编译器，两者的模板编译逻辑、规则校验严格度差异很大，这是数据绑定全量失效的核心原因，可按以下顺序排查修复：

• 优先测试 Ivy 兼容开关：你当前tsconfig.json中注释了enableIvy: false配置，先取消该注释，关闭 Ivy 编译器重新启动服务。如果绑定恢复正常，说明你的项目中有不兼容 Ivy 的第三方依赖或者旧语法。后续如果要使用 Ivy，要么升级所有第三方依赖到兼容 Ivy 的版本，要么在angularCompilerOptions中添加"compilationMode": "partial"开启兼容模式。
• 关闭严格模板校验测试：你开启了strictTemplates: true，这是 Angular 12 默认新增的严格校验规则，Angular 10 没有该配置。如果模板中有变量未声明、绑定类型不匹配的问题，会直接导致对应模板的绑定逻辑不生成。你可以先把strictTemplates改为false，重新编译后如果绑定恢复，就按照控制台的编译提示逐一修复所有模板的类型错误即可。
• 检查模块声明完整性：Ivy 对模块的declarations、imports校验更严格，如果有组件没有在所属模块的declarations中声明，或者重复导入模块、导入未导出的组件，都会触发模板静默编译失败，导致绑定失效。
• 清除缓存重编译：执行命令rm -rf node_modules package-lock.json && npm install && ng serve --aot=false，关闭AOT编译测试，排除构建缓存导致的异常。

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