Today we updated our application the latest angular version (prior, it was generally 16.1.0, now its 16.2.12). Also of the infragistics packages we updated igniteui-angular-i18n from 15.1.21 to 15.1.34.On ng serve there is now a new error message with the content: Module build failed (from ./node_modules/sass_loader/dist/cjs.js) with the error mentioned in the title, and with an Undefined variable.It happens on the line of:@include theme($color-palette, $roundness: 0.25)
It worked previously, but the update broke it. Is there any solution to this issue?
The stacktrace points to the issue, that the $theme variable (for example in _rating-theme.scss) is now undefined. The $theme undefined appears in other components from infragistics as well now.
Hi Thomas,
Thank you for posting to Infragistics Community!
Please, note that according to our Versioning Wiki the major version of the Ignite UI for Angular library has to match Angular’s major version. This is essential for the proper functioning of our components, since they generally depend on Angular’s API, and this one can have breaking changes between major versions. Therefore, my suggestion is to also upgrade any ‘igniteui-angular’ packages that your app depends on in addition to the ‘igniteui-angular-i18n’, which is merely our localization package.
Regarding the theming errors you are facing, I am currently not able to reproduce such an error with a similar include of the theme mixin. I am afraid we also have not had similar reports yet.
What I can say is that it is possible that this behavior is due to some breaking change, needing manual modifications that might have been skipped. My suggestion is to go through our Update Guide, starting from the Ignite UI for Angular version you are upgrading from up to 16.1.x, if that is what you will be using.
In any case, upgrading to equal major versions as mentioned above will be the first step towards resolving this, as it is possible that this difference is what causes the issue.
In case it persists afterwards, please, check out this sample (or any demo from our documentation), which uses the theme mixin similar to your snippet in the styles.scss and compare the discrepancies between it and your own app that may cause the errors. The sample is against Angular and Ignite UI for Angular 16. Also, feel free to fork and modify the sample to reproduce the error and send the sample back to me, so that we can investigate it further. Of course, you could also share the complete stack trace, which will provide some more insights where to look at.
Best regards, Bozhidara Pachilova Associate Software Developer