TS2717:Property contentRect must be of type DOMRectReadOnly

首先,在现有旧项目剥离的时候创建的新的项目,新项目应用的 angular13 版本,其中集成 resize-observer-polyfill 类库的时候抛出了如下异常:

TS2717:Property contentRect must be of type DOMRectReadOnly

  "dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "ng-zorro-antd": "^10.1.2",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.1",
    "@angular/cli": "~13.0.1",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "resize-observer-polyfill": "^1.5.1",
    "typescript": "~4.4.3"
  }

其次,而该异常属于 NG-ZORRO组件 中引用其 ResizeObserver Polyfill
 库所导致的报错 ... 真是一波三折呀

再其次,该异常在 angular11 版本中是正常的,而问题出在了新版本 angular13 中;

最后,解决办法如下:
Plan A:
如果当前是新项目工程可以指定 angular 版本降至 angular 11;

Plan B:
若当前项目工程版本为 angular 13,则可以在 tsconfig.json 的 compilerOptions 中新增如下属性

"skipLibCheck": true

完整例子如下可供参考:

{
  "compileOnSave" : false,
  "compilerOptions" : {
    "baseUrl" : "./",
    "outDir" : "./dist/out-tsc",
    "forceConsistentCasingInFileNames" : true,
    "strict" : true,
    "noImplicitAny": false,
    "noImplicitReturns" : true,
    "noFallthroughCasesInSwitch" : true,
    "sourceMap" : true,
    "declaration" : false,
    "downlevelIteration" : true,
    "experimentalDecorators" : true,
    "suppressImplicitAnyIndexErrors" : true,
    "moduleResolution" : "node",
    "importHelpers" : true,
    "skipLibCheck": true, // 新增该属性
    "noImplicitOverride" : true,
    "noPropertyAccessFromIndexSignature" : true,
    "target" : "es2015",
    "module" : "es2020",
    "lib" : [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions" : {
    "enableI18nLegacyMessageIdFormat" : false,
    "strictInjectionParameters" : true,
    "strictInputAccessModifiers" : true,
    "strictTemplates" : true
  }
}

以上便是此次分享的全部内容，希望能对大家有所帮助！