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?
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.
npm
nightly release: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.