I recently upgraded from Angular 14 to Angular 17 and encountered a few issues. Most of them were related to configuration and SCSS import problems, which I was able to resolve by fixing the configurations locally without SSR.
After resolving these issues, I decided to implement SSR (Server-Side Rendering) by creating server.ts, main.server.ts, app.config.server.ts files, and updating the corresponding config files.
During my attempt to implement SSR, I ran into an error on the UI:
Unexpected token ':'
at new AsyncFunction (<anonymous>)
at instantiateModule (file:///Users/rohith/Documents/Rohith/GIT/grocery/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56049:28
Additionally, there were some errors in the console:
▲ [WARNING] You probably don't mean to use the color value blue in interpolation here.
It may end up represented as blue, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "blue").
If you really want to use the color value here, use '"" + $variant'. [plugin angular-sass]
src/app/styles/mat-button-variants.scss:43:12:
43 │ &.mat-#{$variant} {
╵ ^
The plugin "angular-sass" was triggered by this import
angular:styles/global:styles:5:8:
5 │ @import 'src/app/styles/theme.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
If anyone can offer assistance, it would be greatly appreciated. Below is a snippet of the relevant code:
package.json
{
// package.json content...
}
tsconfig.json
{
// tsconfig.json content...
}
tsconfig.app.json
{
// tsconfig.app.json content...
}
angular.json
{
// angular.json content...
}
Feel free to request any other specific parts of the code if needed.