Our project previously utilized a palette for importing styles, which functioned correctly in Angular 13. However, upon upgrading to Angular 14, the palette no longer works as expected. Below are the specific details of the issue:
Error: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
* ./node_modules/resolve-url-loader/index.js
* ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> :export {
| -mainBlue-: "#4285EB";
| -delete-: "#ff3f3f";
The error within palette.scss is related to the following code snippet:
:export {
-mainBlue-: "#{$main-blue}";
-delete-: "#{$delete}";
-orange-: "#{$orange}";
-white-: "#{$white}";
-error-: "#{$error}";
}
We have a typescript file called palette.scss.ts that exports the following interface:
export interface Palette {
mainBlue: string,
delete: string,
orange: string,
white: string,
error: string,
}
let palette;
export default palette;
This configuration is also included in our angular.json architect section like this:
"styles": [
"src/styles/styles.scss",
"src/styles/palette.scss",
]
When importing the palette in a component, we apply the following logic:
let stringifiedPalette: string = palette
.replace(/(:export|\n|\s)/g,'')
.replace(/;/g,',')
.replace(/-/g,'"');
const lastCommaIndex = stringifiedPalette.lastIndexOf(',');
stringifiedPalette = stringifiedPalette.slice(0, lastCommaIndex) + stringifiedPalette.slice(lastCommaIndex + 1);
this.colorPalette = JSON.parse(stringifiedPalette);
If you have any suggestions on how to address this issue or if you would like more information on the breaking change, please refer to the following link: https://github.com/angular/angular-cli/issues/23273
I suspect it might be a configuration problem, but I have yet to find a solution that resolves it.