error starting angular project caused from ng-zorro after updating project to latest version...

X [ERROR] Error evaluating function color: JavaScript evaluation error: 'ReferenceError: colorPalette is not defined' [plugin angular-less]
​

node_modules/ng-zorro-antd/button/style/index.less:33:4:
33 │ .btn-primary();
╵ ^


The plugin "angular-less" was triggered by this import

inside of a theme.less file

`// Custom Theming for NG-ZORRO
// For more information: https://ng.ant.design/docs/customize-theme/en
@import "../node_modules/ng-zorro-antd/ng-zorro-antd";

// Override less variables to here
// View all variables: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less
@primary-color: #0e60aa;
@primary-color-hover: color(~`colorPalette("@{primary-color}", 5) `);
@primary-color-active: color(~`colorPalette("@{primary-color}", 7) `);
@primary-color-outline: fade(@primary-color, @outline-fade);

@processing-color: @primary-color;`


and inside angular.json

"styles": ["src/theme.less", "src/styles.scss"],
"scripts": [
"/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
},


i tried

1. adjusting importing and in different positions and importing color palette of ngzoro
2. using a custom webpack instead of this file but it lead to another issues and weird behaviour where its not working like it used to before updating the project

Continue reading...