angular-cli: Sass errors after migrating from Angular 13 to 15 / Node 14 to 18
Command
build, test
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
13
Description
We are seeing flaky Sass errors during ng build and ng test after upgrading our project from Angular 13 to 15. We use a custom theme on the legacy components.
I have disabled optimization in order to see the stack trace of the error, however the output is different each time it fails as is the error.
Errors: Unterminated string token SassError: Can’t find stylesheet to import. SassError: Undefined variable. SassError: Module loop: this module is already being loaded.
angular.json
"styles": [
"src/styles/theme.scss",
"src/styles/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": ["src/styles"]
},
_variables.scss
@use '@angular/material' as mat;
$fun2-light-color: #323a45;
...
theme.scss
@use '@angular/material' as mat;
@use 'variables' as v;
$app-theme: mat.define-light-theme(
(
color: (
primary: v.$primary,
accent: v.$accent,
),
)
);
@include mat.all-legacy-component-typographies();
@include mat.legacy-core();
@include mat.all-legacy-component-themes($app-theme);
styles.scss
@use '@angular/material' as mat;
@use 'variables' as v;
body {
margin: 0;
}
...
fun.component.scss
@use 'variables' as v;
.accept {
border: 2px solid v.$fun2-disabled-color;
}
...
Minimal Reproduction
These errors only happen in our Jenkins pipeline, where a Chromium image with Node 18.15 is installed.
- npm ci --legacy-peer-deps
- npm run ngcc
- ng test --code-coverage --watch=false --browsers ChromiumHeadlessDebug --reporters=progress,coverage
- ng build --configuration production
Exception or Error
Optimization on:
./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
/work/src/app/fun/fun.component.scss:17:100: ERROR: Unterminated string token
./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
/work/src/app/person/person.component.scss:17:100: ERROR: Unterminated string token
Optimization off:
./src/app/fun/fun.component.scss?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
26 │ @use '@material/feature-targeting/feature-targeting';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
_button.scss 26:1 @use
src/app/fun/fun.component.scss 1:1 root stylesheet
./src/app/person/person.component.scss?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
2 │ @use '@material/button/button' as mdc-button;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
node_modules/@angular/material/button/_button-theme.scss 2:1 @use
node_modules/@angular/material/core/density/private/_all-density.scss 2:1 @forward
_index.scss 18:1 @use
src/app/user/user.component.scss 1:1 root stylesheet
./src/app/fun2/fun2.component.scss?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
39 │ background: v.$fun2-light-color;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
src/app/fun2/fun2.component.scss 39:15 root stylesheet
Your Environment
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 15.2.6
Node: 18.15.0
Package Manager: npm 9.1.2
OS: Alpine Linux 3.17.2
Angular: 15.2.6
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1502.5
@angular-devkit/build-angular 15.2.5
@angular-devkit/core 15.2.5
@angular-devkit/schematics 15.2.5
@angular/cli 15.2.5
@angular/flex-layout 15.0.0-beta.42
@schematics/angular 15.2.5
rxjs 6.5.5
typescript 4.9.5
Packages:
"dependencies": {
"@angular/animations": "15.2.6",
"@angular/cdk": "15.2.6",
"@angular/common": "15.2.6",
"@angular/compiler": "15.2.6",
"@angular/core": "15.2.6",
"@angular/flex-layout": "^15.0.0-beta.42",
"@angular/forms": "15.2.6",
"@angular/localize": "15.2.6",
"@angular/material": "15.2.6",
"@angular/material-moment-adapter": "15.2.6",
"@angular/platform-browser": "15.2.6",
"@angular/platform-browser-dynamic": "15.2.6",
"@angular/router": "15.2.6",
"core-js": "^3.30.0",
"rxjs": "6.5.5",
"tslib": "^2.5.0",
"zone.js": "^0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.2.6",
"@angular/cli": "^15.2.6",
"@angular/compiler-cli": "^15.2.6",
"@angular/language-service": "^15.2.6",
"@types/node": "^18.15.11",
"http-server": "^14.1.1",
"subsink": "^1.0.2",
"tsutils": "^3.21.0",
"typescript": "^4.9.5",
"webdriver-manager": "^12.1.9",
}
Anything else relevant?
Solutions attempted:
- Downgrading TS to 4.8.4
- Running npx browserslist --update-db (We do not use .browserslist)
- Adding node_modules to stylePreprocessorOptions includePaths
- Set preserveSymlinks true/false
- Disabling cache
Related issues: https://github.com/material-components/material-components-web/issues/7770 https://github.com/angular/angular-cli/issues/25122 https://github.com/angular/angular-cli/issues/24467 https://stackoverflow.com/questions/71916458/editor-component-scss17100-error-unterminated-string-token-angular-scss https://stackoverflow.com/questions/75531808/angular-15-cant-create-custom-material-theme https://stackoverflow.com/questions/75740820/getting-material-component-error-while-migrating-from-angular-9-1-to-15
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 1
- Comments: 18
Make sense.
Also, material sass are always somehow “involve”. We are using mat legacy because we could not fully migrate. I am wondering if once we move to final material component the issue will be gone.
I also tried moving to the latest version of material within v15. Same. I tried limiting the use of mat across the application. Same, material will complain. I tried adding removing sass from “stylePreprocessorOption”. Same.
The issue was never reproduced in LOCAL, always in a github action machine (Ubuntu Latest)
New approach: I removed all @imports in my sass, and I used @use. I really thought that the problem was there, but it is not, same issue in the pipeline 😦
As a follow up, we also tried to remove all
@importin favor of@usebut the problem persists. My best guess is that this is caused by multi-threaded loading with insufficient locking.We were able to resolve the issue by only using
'@use '@angular/material' as mat;in our theme scss file (included in the style’s array). We copied the functions we needed from @angular/material to a new scss file, and imported (using @use and @forward) it into our variable scss file (for creating palettes for example). Not ideal but it solved our problem of flaky build failures for now.Thanks for reporting this issue. However, you didn’t provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can’t act on issues that are lacking important information.
If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.