I am in the process of trying to upgrade from Angular version 15 to 16. After updating the necessary packages I am getting the error:HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):Undefined variable. ╷117 │ @error 'The theme for #{map.get($map, 'name')} does not contain #{$key}'; │ ^^^^ ╵ node_modules\igniteui-theming\sass\themes\_functions.scss 117:41 var-get() node_modules\@infragistics\igniteui-angular\lib\core\styles\components\bottom-nav\_bottom-nav-theme.scss 125:16 bottom-nav() node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\generators\_base.scss 155:9 theme-internal() node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\generators\_base.scss 42:5 theme() node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\generators\_base.scss 667:5 light-theme() src\styles\rhi-light-theme.scss 6:3 @import src\styles.scss 23:9 root stylesheetMy styles.scss is set as below://rhi styles
Hello Lewis,
Thank you for posting to Infragistics Community!
As per our Versioning Wiki, it’s important to ensure that the major version of the Ignite UI for Angular library matches the major version of Angular you’re using. This alignment is crucial for the proper functionality of our components, as they often depend on Angular's API.
Therefore, I recommend upgrading the 'igniteui-angular' packages in your application to match the Angular version you're currently using.
Regarding the theming issues you're experiencing, I haven't been able to replicate the error with a similar setup on my end. I’ve attached a sample implementation for your review. Please try reproducing the issue in this sample and share it back with me for further investigation. This will help me better understand the problem and devise an appropriate solution.
In the meantime, upgrading to the matching major versions, as mentioned above, is a crucial first step, as the version mismatch may be the underlying cause of the issue.
Best regards, Arkan Ahmedov Infragistics
themeIgniteUI16.zip
looking at it, I can't spot what the issue is. These are our installed packages:
Hello,
After looking further into the packages you have installed, it appears that the version of igniteui-theming in your project is incompatible with the version of @infragistics/igniteui-angular@16.1.30 you're using. The correct version of igniteui-theming required for this version of IgniteUI Angular is igniteui-theming@3.3.3.
To resolve the issue, please follow these steps:
npm uninstall igniteui-theming
npm install igniteui-theming@3.3.3
It’s important to note that starting from IgniteUI Angular version 15.x, the library has a direct dependency on igniteui-theming. You can refer to the following documentation for more information on when this change was introduced: Update Guide for IgniteUI Angular
After completing these steps, please rebuild your project, and this should resolve the theming errors you've been facing.
Best Regards, Arkan Ahmedov Infragistics
That's exactly what the issue was, thank you!
I’m glad the suggested fix resolved the issue. If you have additional questions, please don’t hesitate to reach out.
Best Regards,Arkan Ahmedov,Infragistics