Búsqueda de sitios web

typescript - Angular Prueba unitaria TypeError: this._renderer.addClass no es una función

Después de actualizar, mis pruebas unitarias que antes pasaban ahora fallan con el error: 'TypeError: this._renderer.addClass no es una función' en varias pruebas, a pesar de no usar ni importar el renderer en el componente mismo. ¿Alguna idea sobre este error?

TypeError: this._renderer.addClass is not a function
            at forEach (node_modules/@angular/common/fesm2022/common.mjs:2729:36)
            at Array.forEach (<anonymous>)
            at NgClass._toggleClass (node_modules/@angular/common/fesm2022/common.mjs:2727:36)
            at NgClass._applyStateDiff (node_modules/@angular/common/fesm2022/common.mjs:2705:22)
            at NgClass.ngDoCheck (node_modules/@angular/common/fesm2022/common.mjs:2685:14)
            at DefaultClassDirective.call [as ngDoCheck] (node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-extended.mjs:151:30)
            at callHookInternal (node_modules/@angular/core/fesm2022/core.mjs:3607:14)
            at callHook (node_modules/@angular/core/fesm2022/core.mjs:3638:9)
            at callHooks (node_modules/@angular/core/fesm2022/core.mjs:3589:17)
            at executeInitAndCheckHooks (node_modules/@angular/core/fesm2022/core.mjs:3539:9)
Chrome Headless 121.0.6167.184 (Windows 10): Executed 8 of 230 (1 FAILED) (0 secs / 0.852 secs)


"devDependencies": {
    "@angular-devkit/build-angular": "^17.1.3",
    "@angular/compiler-cli": "17.1.3",
    "@angular/language-service": "^17.1.3",
    "@ngrx/store-devtools": "^17.1.0",
    "@types/jasmine": "^5.1.1",
    "@types/jasminewd2": "^2.0.12",
    "@types/node": "^20.11.17",
    "codelyzer": "^0.0.28",
    "eslint": "^8.56.0",
    "jasmine-core": "~5.1.2",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "^6.4.2",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage": "^2.2.1",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "ts-node": "~10.9.2",
    "typescript": "~5.3.3"
  }

He identificado la fuente del problema: es el bloque que contiene [ngClass.lg]='mrg-rt-10'. Cuando elimino este bloque, todo funciona bien. ¿Alguna idea sobre esto?

<span *ngIf="eventForm.get('all_day').value === false" fxFlex="50%" fxFlex.xs="100%" [ngClass.lg]="'mrg-rt-10'"> </span>

Respuesta #1

Mi solución es simplemente hacer individualmente [class.Name]=""

Entonces, en lugar de [ngClass]='{'some-class': true}' puedes cambiar la sintaxis a [class.some-class]='true' y eso solucionó mi problema. También me encontré con este artículo sobre CommonModule faltante para componentes autónomos, pero no me ayudó, simplemente cambiar la sintaxis lo resolvió para mí.

Respuesta #2

El problema surgió en la nueva versión de Angular Material al usar ngClass con consultas de pantalla como ngClass.sm o ngClass.lg. Cambiar a ngStyle.sm resolvió el problema.

Artículos relacionados