jtc10005 / ngx-flex-layout

port of @angular/flex-layout to support @angular > v15
MIT License
17 stars 1 forks source link

ngClass is throwing error when using gt-md from flex layout #14

Open anubhab5 opened 1 month ago

anubhab5 commented 1 month ago

Bug Report

What is the expected behavior?

The screen should render correctly.

What is the current behavior?

The screen is not rendering and getting the below console error -

main.ts:5 ERROR TypeError: this._renderer.addClass is not a function at common.mjs:2966:26 at Array.forEach () at _NgClass._toggleClass (common.mjs:2964:30) at _NgClass._applyStateDiff (common.mjs:2943:14) at _NgClass.ngDoCheck (common.mjs:2920:10) at _DefaultClassDirective.updateWithValue (ngx-flexible-layout-extended.mjs:42:26) at _MediaMarshaller.updateElement (ngx-flexible-layout-core.mjs:1440:9) at _MediaMarshaller.setValue (ngx-flexible-layout-core.mjs:1381:12) at _DefaultClassDirective.setValue (ngx-flexible-layout-core.mjs:1697:18) at ngx-flexible-layout-core.mjs:1628:14 handleError @ core.mjs:6531 (anonymous) @ core.mjs:31954 invoke @ zone.js:369 run @ zone.js:111 runOutsideAngular @ core.mjs:14778 (anonymous) @ core.mjs:31954 _tick @ core.mjs:31541 tick @ core.mjs:31521 _loadComponent @ core.mjs:31602 bootstrap @ core.mjs:31503 (anonymous) @ core.mjs:35108 invoke @ zone.js:369 onInvoke @ core.mjs:14882 invoke @ zone.js:368 run @ zone.js:111 (anonymous) @ zone.js:2538 invokeTask @ zone.js:402 (anonymous) @ core.mjs:14556 onInvokeTask @ core.mjs:14556 invokeTask @ zone.js:401 onInvokeTask @ core.mjs:14869 invokeTask @ zone.js:401 runTask @ zone.js:159 drainMicroTaskQueue @ zone.js:581 Zone - Promise.then onScheduleTask @ core.mjs:14550 scheduleTask @ zone.js:382 onScheduleTask @ zone.js:271 scheduleTask @ zone.js:382 scheduleTask @ zone.js:205 scheduleMicroTask @ zone.js:225 scheduleResolveOrReject @ zone.js:2528 then @ zone.js:2733 (anonymous) @ core.mjs:35103 _callAndReportToErrorHandler @ core.mjs:31275 (anonymous) @ core.mjs:35100 invoke @ zone.js:369 onInvoke @ core.mjs:14882 invoke @ zone.js:368 run @ zone.js:111 run @ core.mjs:14733 internalCreateApplication @ core.mjs:35077 bootstrapApplication @ platform-browser.mjs:1124 (anonymous) @ main.ts:5 Show 42 more frames Show less core.mjs:29869 Angular is running in development mode. main.ts:5 ERROR TypeError: this._renderer.addClass is not a function at common.mjs:2966:26 at Array.forEach () at _NgClass._toggleClass (common.mjs:2964:30) at _NgClass._applyStateDiff (common.mjs:2943:14) at _NgClass.ngDoCheck (common.mjs:2920:10) at _DefaultClassDirective.ngDoCheck (ngx-flexible-layout-extended.mjs:51:26) at callHookInternal (core.mjs:5136:14) at callHook (core.mjs:5167:9) at callHooks (core.mjs:5118:17) at executeInitAndCheckHooks (core.mjs:5068:9)

What are the steps to reproduce?

Providing a StackBlitz (or similar) is the best way to get the team to see your issue.

What is the use-case or motivation for changing an existing behavior?

Based on the responsive behavior of the browser we need to apply different classes. Working for rest of the classes 'ngClass.xs', 'ngClass.sm', 'ngClass.md', 'ngClass.lg', 'ngClass.xl',

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

package.json

"private": true, "dependencies": { "@angular/animations": "^17.3.0", "@angular/common": "^17.3.0", "@angular/compiler": "^17.3.0", "@angular/core": "^17.3.0", "@angular/forms": "^17.3.0", "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", "@angular/material": "^17.0.0", "@angular/service-worker": "^17.0.0", "@babel/plugin-proposal-private-methods": "^7.18.6", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "@typescript-eslint/typescript-estree": "^6.5.0", "core-js": "^3.32.1", "ngx-flexible-layout": "^17.0.1", "ngx-material-timepicker": "^13.1.1", "ngx-uploadx": "^6.1.0", "sass-migrator": "^1.7.3", "zone.js": "~0.14.3" }, "devDependencies": { "@angular-devkit/build-angular": "^17.3.10", "@angular-devkit/build-webpack": "^0.1703.10", "@angular-devkit/core": "^17.3.10", "@angular-devkit/schematics": "^17.3.10", "@angular-eslint/builder": "^16.1.1", "@angular-eslint/eslint-plugin": "17.5.3", "@angular-eslint/eslint-plugin-template": "17.5.3", "@angular-eslint/schematics": "^17.5.3", "@angular-eslint/template-parser": "^17.5.3", "@angular/cli": "^17.3.10", "@angular/compiler-cli": "^17.3.0", "@angular/language-service": "^17.3.12", "@compodoc/compodoc": "^1.1.24", "@faker-js/faker": "^9.0.3", "@schematics/angular": "^17.3.10", "@types/jasmine": "~5.1.0", "@types/jasminewd2": "^2.0.13", "@types/node": "^22.7.4", "@typescript-eslint/eslint-plugin": "8.8.0", "@typescript-eslint/parser": "8.8.0", "ajv": "^8.11.0", "compression-webpack-plugin": "^10.0.0", "eslint": "^8.48.0", "eslint-plugin-import": "^2.31.0", "eslint-plugin-jsdoc": "50.3.0", "eslint-plugin-prefer-arrow": "^1.2.3", "jasmine-core": "~5.1.0", "jasmine-spec-reporter": "^7.0.0", "json-schema-faker": "^0.5.6", "karma": "~6.4.2", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.1", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "karma-junit-reporter": "^2.0.1", "karma-viewport": "^1.0.9", "modclean": "^3.0.0-beta.1", "ng-packagr": "^17.0.0", "postcss": "^8.4.47", "properties-reader": "^2.3.0", "puppeteer": "^23.5.0", "sass-lint": "^1.13.1", "stylelint": "^16.9.0", "stylelint-config-standard": "^36.0.1", "stylelint-scss": "^6.7.0", "ts-node": "^10.9.1", "typescript": "~5.4.2", "webpack": "^5.95.0", "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" },

Is there anything else we should know?

we are migrating our app from angular 16 to 17 when we faced this issue.

jtc10005 commented 1 month ago

I think this is fixed in 17.0.4 by @Venipa. See PR #7