building failed sometimes with Can't find stylesheet to import

robertIsaac commented 6 months ago

Command

build

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

No response

Description

about 5% of our pipeline fail with this error

✘ [ERROR] Can't find stylesheet to import.
   ╷
27 │ @use '@material/ripple/ripple';
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/button/_button-ripple.scss 27:1                             @use
  node_modules/@material/button/_button-shared-theme.scss 42:1                       @use
  node_modules/@material/button/_button-base.scss 35:1                               @use
  @material/button/_button.scss 30:1                                                 @use
  node_modules/@angular/material/button/_button-theme.scss 2:1                       @use
  node_modules/@angular/material/core/density/private/_all-density.scss 2:1          @forward
  @angular/_index.scss 20:1                                                          @use
  packages/web/src/theme/palette.scss 3:1                                            @import
  theme.scss 1:9                                                                     @import
  packages/web/src/app/grid-layout/grid-controls/scroll-controls.component.scss 1:9  root stylesheet [plugin angular-sass]

it happened only one with ng serve and it was very difficult to resolve, my colleague had to uninstall node and install it again previously he tried to delete the project and clone it again, remove yarn cache but neither work

Minimal Reproduction

it's impossible to reproduce, since even rerunning the same one succeed it's not code error

this happens even when we were using webpack (we are using the application builder which uses esbuild), I noticed it in versions 15 and 17 of Angular

Exception or Error

2024-02-27T12:22:15.0367412Z - Building...
2024-02-27T12:24:41.4014964Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:41.4015914Z    ╷
2024-02-27T12:24:41.4016209Z 27 │ @use '@material/ripple/ripple';
2024-02-27T12:24:41.4016714Z    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:41.4016908Z    ╵
2024-02-27T12:24:41.4017254Z   node_modules/@material/button/_button-ripple.scss 27:1                             @use
2024-02-27T12:24:41.4017625Z   node_modules/@material/button/_button-shared-theme.scss 42:1                       @use
2024-02-27T12:24:41.4018003Z   node_modules/@material/button/_button-base.scss 35:1                               @use
2024-02-27T12:24:41.4018258Z   @material/button/_button.scss 30:1                                                 @use
2024-02-27T12:24:41.4018608Z   node_modules/@angular/material/button/_button-theme.scss 2:1                       @use
2024-02-27T12:24:41.4018980Z   node_modules/@angular/material/core/density/private/_all-density.scss 2:1          @forward
2024-02-27T12:24:41.4019247Z   @angular/_index.scss 20:1                                                          @use
2024-02-27T12:24:41.4019490Z   packages/web/src/theme/palette.scss 3:1                                            @import
2024-02-27T12:24:41.4019731Z   theme.scss 1:9                                                                     @import
2024-02-27T12:24:41.4020172Z   packages/web/src/app/grid-layout/grid-controls/scroll-controls.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:41.4020368Z 
2024-02-27T12:24:41.4020442Z 
2024-02-27T12:24:41.4020738Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:41.4020978Z    ╷
2024-02-27T12:24:41.4021240Z 29 │ @use '@material/animation/functions' as functions2;
2024-02-27T12:24:41.4021514Z    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:41.4021704Z    ╵
2024-02-27T12:24:41.4021896Z   _ripple.scss 29:1                                                                                @import
2024-02-27T12:24:41.4022352Z   packages/web/src/app/grid-layout/grid-layout-container/grid-layout-container.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:41.4022584Z 
2024-02-27T12:24:41.4022657Z 
2024-02-27T12:24:41.4022930Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mUndefined variable.
2024-02-27T12:24:41.4023156Z    ╷
2024-02-27T12:24:41.4023377Z 23 │       opacity: $disabled-opacity;
2024-02-27T12:24:41.4023611Z    │                ^^^^^^^^^^^^^^^^^
2024-02-27T12:24:41.4023798Z    ╵
2024-02-27T12:24:41.4024214Z   packages/web/src/app/global-search/search-result-item/search-result-item.component.scss 23:16  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:41.4024437Z 
2024-02-27T12:24:41.4024509Z 
2024-02-27T12:24:41.4024797Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:41.4025021Z   ╷
2024-02-27T12:24:41.4033609Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:41.4034506Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:41.4035470Z   ╵
2024-02-27T12:24:41.4035973Z   packages/web/src/theme/palette.scss 3:1                                       @import
2024-02-27T12:24:41.4036673Z   theme.scss 1:9                                                                @import
2024-02-27T12:24:41.4271734Z   packages/web/src/app/global-search/global-search-dropdown.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8133632Z 
2024-02-27T12:24:42.8157446Z 
2024-02-27T12:24:42.8158532Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8158983Z   ╷
2024-02-27T12:24:42.8159309Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8159700Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8159930Z   ╵
2024-02-27T12:24:42.8160221Z   node_modules/@angular/material/core/typography/_typography.scss 6:1                         @forward
2024-02-27T12:24:42.8160603Z   _index.scss 12:1                                                                            @import
2024-02-27T12:24:42.8161136Z   packages/web/src/app/dashboard-header/account-dropdown/account-dropdown.component.scss 2:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8161735Z 
2024-02-27T12:24:42.8161870Z 
2024-02-27T12:24:42.8162204Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8162564Z    ╷
2024-02-27T12:24:42.8162884Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:42.8163278Z    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8163505Z    ╵
2024-02-27T12:24:42.8163775Z   node_modules/@material/typography/_typography.scss 31:1                                                    @forward
2024-02-27T12:24:42.8164165Z   node_modules/@material/typography/_variables.scss 24:1                                                     @forward
2024-02-27T12:24:42.8164510Z   _index.scss 1:1                                                                                            @import
2024-02-27T12:24:42.8165055Z   packages/web/src/app/market-page/market-page-header-actions/market-page-header-actions.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8165389Z 
2024-02-27T12:24:42.8165518Z 
2024-02-27T12:24:42.8165889Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8166167Z   ╷
2024-02-27T12:24:42.8166509Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:42.8166855Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8167583Z   ╵
2024-02-27T12:24:42.8168042Z   packages/web/src/theme/palette.scss 3:1                                                                                                                                         @import
2024-02-27T12:24:42.8168494Z   theme.scss 1:9                                                                                                                                                                  @import
2024-02-27T12:24:42.8169310Z   packages/web/src/app/newsletters-and-reports/newsletters-and-reports-page/newsletters-forecasts-page/newsletters-forecasts-card/newsletters-forecasts-card.component.scss 1:10  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8169737Z 
2024-02-27T12:24:42.8169963Z 
2024-02-27T12:24:42.8170361Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8170711Z   ╷
2024-02-27T12:24:42.8171178Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8171603Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8172011Z   ╵
2024-02-27T12:24:42.8172433Z   node_modules/@angular/material/core/typography/_typography.scss 6:1                                                                                                                       @forward
2024-02-27T12:24:42.8172833Z   _index.scss 12:1                                                                                                                                                                          @import
2024-02-27T12:24:42.8173661Z   packages/web/src/app/newsletters-and-reports/newsletters-and-reports-page/newsletter-table.scss 1:9                                                                                       @import
2024-02-27T12:24:42.8174465Z   packages/web/src/app/newsletters-and-reports/newsletters-and-reports-page/newsletter-notifications-page/newsletter-notifications-table/newsletter-notifications-table.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8174886Z 
2024-02-27T12:24:42.8175107Z 
2024-02-27T12:24:42.8175507Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8175875Z    ╷
2024-02-27T12:24:42.8176341Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:42.8176745Z    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8177152Z    ╵
2024-02-27T12:24:42.8177573Z   node_modules/@material/typography/_typography.scss 31:1                                                                                      @forward
2024-02-27T12:24:42.8178100Z   node_modules/@material/typography/_variables.scss 24:1                                                                                       @forward
2024-02-27T12:24:42.8178562Z   _index.scss 1:1                                                                                                                              @import
2024-02-27T12:24:42.8179316Z   packages/web/src/app/newsletter-center/newsletter-center/active-newsletter-subscriptions/active-newsletter-subscriptions.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8179695Z 
2024-02-27T12:24:42.8179898Z 
2024-02-27T12:24:42.8180297Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8180664Z   ╷
2024-02-27T12:24:42.8181115Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:42.8181532Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8181925Z   ╵
2024-02-27T12:24:42.8182334Z   packages/web/src/theme/palette.scss 3:1                                                                                     @import
2024-02-27T12:24:42.8182702Z   theme.scss 1:9                                                                                                              @import
2024-02-27T12:24:42.8183436Z   packages/web/src/app/widgets/price-chart-widget/forecast-forbidden-dropdown/forecast-forbidden-dropdown.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8183780Z 
2024-02-27T12:24:42.8183986Z 
2024-02-27T12:24:42.8184384Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8184745Z   ╷
2024-02-27T12:24:42.8185211Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8185581Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8185982Z   ╵
2024-02-27T12:24:42.8186406Z   node_modules/@angular/material/core/typography/_typography.scss 6:1                                                      @forward
2024-02-27T12:24:42.8186798Z   _index.scss 12:1                                                                                                         @use
2024-02-27T12:24:42.8187522Z   packages/web/src/app/dialogs/common/content-selector/recommended-news-layout/recommended-news-layout.component.scss 1:1  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8187984Z 
2024-02-27T12:24:42.8188222Z 
2024-02-27T12:24:42.8188610Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8188985Z    ╷
2024-02-27T12:24:42.8189468Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:42.8189868Z    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8190255Z    ╵
2024-02-27T12:24:42.8190667Z   node_modules/@material/typography/_typography.scss 31:1                   @forward
2024-02-27T12:24:42.8191292Z   node_modules/@material/typography/_variables.scss 24:1                    @forward
2024-02-27T12:24:42.8191773Z   _index.scss 1:1                                                           @import
2024-02-27T12:24:42.8192340Z   packages/web/src/app/home/no-workspaces/no-workspaces.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8192647Z 
2024-02-27T12:24:42.8192862Z 
2024-02-27T12:24:42.8193251Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mUndefined mixin.
2024-02-27T12:24:42.8193659Z    ╷
2024-02-27T12:24:42.8193898Z 31 │     @include wrap-text;
2024-02-27T12:24:42.8194156Z    │     ^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8194377Z    ╵
2024-02-27T12:24:42.8194887Z   packages/web/src/app/widgets/time-series/time-series-header-group-cell/time-series-header-group-cell.component.scss 31:5  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8195179Z 
2024-02-27T12:24:42.8195254Z 
2024-02-27T12:24:42.8195582Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8195966Z   ╷
2024-02-27T12:24:42.8196232Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:42.8196501Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8196720Z   ╵
2024-02-27T12:24:42.8197049Z   packages/web/src/theme/palette.scss 3:1                                                                      @import
2024-02-27T12:24:42.8197398Z   theme.scss 1:9                                                                                               @import
2024-02-27T12:24:42.8198137Z   packages/web/src/app/widgets/time-series/time-series-header-cell/time-series-header-cell.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8198477Z 
2024-02-27T12:24:42.8198682Z 
2024-02-27T12:24:42.8199079Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8199352Z   ╷
2024-02-27T12:24:42.8199723Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8200098Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8200344Z   ╵
2024-02-27T12:24:42.8200609Z   node_modules/@angular/material/core/typography/_typography.scss 6:1                                  @forward
2024-02-27T12:24:42.8200987Z   _index.scss 12:1                                                                                     @import
2024-02-27T12:24:42.8201508Z   packages/web/src/app/unsupported-browser/unsupported-browser/unsupported-browser.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8201831Z 
2024-02-27T12:24:42.8201946Z 
2024-02-27T12:24:42.8202284Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8202621Z    ╷
2024-02-27T12:24:42.8202941Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:42.8203326Z    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8203567Z    ╵
2024-02-27T12:24:42.8203836Z   node_modules/@material/typography/_typography.scss 31:1                      @forward
2024-02-27T12:24:42.8204207Z   node_modules/@material/typography/_variables.scss 24:1                       @forward
2024-02-27T12:24:42.8204501Z   _index.scss 1:1                                                              @import
2024-02-27T12:24:42.8204977Z   packages/web/src/app/widgets/widget-header/widget-header.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8205274Z 
2024-02-27T12:24:42.8205405Z 
2024-02-27T12:24:42.8205726Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mUndefined variable.
2024-02-27T12:24:42.8206051Z   ╷
2024-02-27T12:24:42.8206344Z 8 │   font-weight: $font-weight-semibold;
2024-02-27T12:24:42.8206702Z   │                ^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8206934Z   ╵
2024-02-27T12:24:42.8207427Z   packages/web/src/app/widgets/historic-price-widget/historic-price-header/historic-price-header.component.scss 8:16  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8207890Z 
2024-02-27T12:24:42.8208026Z 
2024-02-27T12:24:42.8208333Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8208608Z   ╷
2024-02-27T12:24:42.8208858Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:42.8209126Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8209345Z   ╵
2024-02-27T12:24:42.8209573Z   packages/web/src/theme/palette.scss 3:1                                                                      @import
2024-02-27T12:24:42.8209917Z   theme.scss 1:9                                                                                               @import
2024-02-27T12:24:42.8210461Z   packages/web/src/app/date-range-picker/date-range-picker-header/date-range-picker-header.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8210798Z 
2024-02-27T12:24:42.8210914Z 
2024-02-27T12:24:42.8211231Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8211586Z   ╷
2024-02-27T12:24:42.8211972Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8212349Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8212587Z   ╵
2024-02-27T12:24:42.8212869Z   node_modules/@angular/material/core/typography/_typography.scss 6:1                                                                                  @forward
2024-02-27T12:24:42.8213244Z   _index.scss 12:1                                                                                                                                     @import
2024-02-27T12:24:42.8213855Z   packages/web/src/app/widgets/jacobsen-widgets/common/jacobsen-widgets-header/jacobsen-widgets-dropdown/jacobsen-widgets-dropdown.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8214240Z 
2024-02-27T12:24:42.8214355Z 
2024-02-27T12:24:42.8214672Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8215030Z    ╷
2024-02-27T12:24:42.8215334Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:42.8215730Z    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8215972Z    ╵
2024-02-27T12:24:42.8216233Z   node_modules/@material/typography/_typography.scss 31:1                          @forward
2024-02-27T12:24:42.8216612Z   node_modules/@material/typography/_variables.scss 24:1                           @forward
2024-02-27T12:24:42.8216892Z   _index.scss 1:1                                                                  @import
2024-02-27T12:24:42.8217451Z   packages/web/src/app/common/search-bar/search-bar-form-field.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8217762Z 
2024-02-27T12:24:42.8217894Z 
2024-02-27T12:24:42.8218231Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mUndefined variable.
2024-02-27T12:24:42.8218570Z    ╷
2024-02-27T12:24:42.8218851Z 17 │     font-size: $font-size-xl;
2024-02-27T12:24:42.8219180Z    │                ^^^^^^^^^^^^^
2024-02-27T12:24:42.8219439Z    ╵
2024-02-27T12:24:42.8219970Z   packages/web/src/app/dialogs/onboarding-dialog/onboarding-dialog-step/onboarding-dialog-step.component.scss 17:16  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8220299Z 
2024-02-27T12:24:42.8220445Z 
2024-02-27T12:24:42.8220789Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8221139Z   ╷
2024-02-27T12:24:42.8221434Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:42.8221735Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8221976Z   ╵
2024-02-27T12:24:42.8222246Z   packages/web/src/theme/palette.scss 3:1                                             @import
2024-02-27T12:24:42.8222550Z   theme.scss 1:9                                                                      @import
2024-02-27T12:24:42.8223065Z   packages/web/src/app/dialogs/common/dialog-header/dialog-header.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8223461Z 
2024-02-27T12:24:42.8223609Z 
2024-02-27T12:24:42.8223954Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8224300Z   ╷
2024-02-27T12:24:42.8224622Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8224995Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8225231Z   ╵
2024-02-27T12:24:42.8225525Z   node_modules/@angular/material/core/typography/_typography.scss 6:1                                   @forward
2024-02-27T12:24:42.8225902Z   _index.scss 12:1                                                                                      @import
2024-02-27T12:24:42.8226449Z   packages/web/src/app/components/market-page-types-select/market-page-types-select.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8226769Z 
2024-02-27T12:24:42.8226917Z 
2024-02-27T12:24:42.8227262Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8227702Z    ╷
2024-02-27T12:24:43.8115573Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:44.8121750Z    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:44.8122716Z    ╵
2024-02-27T12:24:44.8123558Z   node_modules/@material/typography/_typography.scss 31:1         @forward
2024-02-27T12:24:44.8124051Z   node_modules/@material/typography/_variables.scss 24:1          @forward
2024-02-27T12:24:44.8124596Z   _index.scss 1:1                                                 @import
2024-02-27T12:24:44.8125340Z   packages/web/src/app/common/stepper/stepper.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:44.8125671Z 
2024-02-27T12:24:44.8125924Z 
2024-02-27T12:24:44.8126419Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mUndefined variable.
2024-02-27T12:24:44.8126844Z   ╷
2024-02-27T12:24:44.8127348Z 7 │   font-size: $font-size-m;
2024-02-27T12:24:44.8127754Z   │              ^^^^^^^^^^^^
2024-02-27T12:24:44.8128255Z   ╵
2024-02-27T12:24:44.8128962Z   packages/web/src/app/common/download-link/download-link.component.scss 7:14  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:44.8129332Z 
2024-02-27T12:24:44.8129561Z 
2024-02-27T12:24:44.8130026Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:44.8130439Z   ╷
2024-02-27T12:24:44.8130947Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:44.8131317Z   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:44.8131772Z   ╵
2024-02-27T12:24:44.8132209Z   packages/web/src/theme/palette.scss 3:1                           @import
2024-02-27T12:24:44.8132574Z   theme.scss 1:9                                                    @import
2024-02-27T12:24:44.8133102Z   packages/web/src/app/common/list/grouped-list.component.scss 1:9  root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:44.8133418Z 
2024-02-27T12:24:44.8133578Z 
2024-02-27T12:24:44.8133846Z Application bundle generation failed. [146.363 seconds]

Your Environment

Angular CLI: 17.0.3
Node: 20.10.0
Package Manager: yarn 4.0.2
OS: win32 x64

Angular: 17.0.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.3
@angular-devkit/build-angular   17.0.3
@angular-devkit/core            17.0.3
@angular-devkit/schematics      17.0.3
@angular/cdk                    16.2.12
@angular/cli                    17.0.3
@angular/material               16.2.12
@schematics/angular             17.0.3
ng-packagr                      17.0.2
rxjs                            7.8.1
typescript                      5.2.2
webpack                         5.69.1
zone.js                         0.14.2

Anything else relevant?

No response

mathieu-schnoor commented 1 month ago

I've been experiencing this issue for a while now. Recently with the Angular 18 update it seems to be occurring more often.

It happens randomly, only on CI with Github Actions
It happens with ng serve or ng build
The Github Actions CI uses the default Ubuntu runner
It never happens when building locally

Here's some info about my project:

Angular 18, NX setup with 10+ packages, and using default NX parallelism
Using the new browser-esbuild build system
No Angular Material, we have theming variables and mixins in SCSS that we import all over, hundreds of SCSS files

I tried the following without success:

Convert all the @import into @use
Import paths with stylePreprocessorOptions

Reading this thread and trying your suggestions, I added the following env into my flaky build:

CI: true
NG_BUILD_MAX_WORKERS: 1
nx --parallel=false

This seems to have improved the reliability (no failure since I added that). I have to keep monitoring this over a longer period, but this looks like it's having a positive effect.

sergiubologa commented 1 month ago

We're using Azure and have an NX Angular 17 monorepo with 11 apps, but we are building only one single app at a time. We also have around 25 libs built together with that app. We used to have intermittent failures like this, but using NG_BUILD_MAX_WORKERS: 1 seems to solve it.

@alan-agius4 thanks for your investigation and solutions! 🤗

Also, there's something unclear to me: setting NG_BUILD_MAX_WORKERS is just a workaround, but your fix here is the correct fix, right? In the latest Angular is the NG_BUILD_MAX_WORKERS taken into consideration?

alan-agius4 commented 1 month ago

Also, there's something unclear to me: setting NG_BUILD_MAX_WORKERS is just a workaround, but your fix https://github.com/angular/angular-cli/pull/27969 is the correct fix, right? In the latest Angular is the NG_BUILD_MAX_WORKERS taken into consideration?

yes

MelanieW97 commented 1 month ago

Great that the issue seems to be fixed in the latest build. However, it's unclear to me which Angular versions got this fix.

Here it says that "the changes were merged into the following branches: main, 18.0.x, 18.1.x".

What about Angular 17? Is the fix included right there or not? Do I have to update to Angular 18 in order to get the fix?

alan-agius4 commented 1 month ago

@MelanieW97, no version 17 is in LTS as such it only receives security fixes. See https://angular.dev/reference/releases#lts-fixes for more information.

In earlier versions setting the above mentioned environment variable is required.

tobiasbaum commented 1 month ago

Is https://github.com/angular/angular-cli/pull/27969 really a fix for the root cause? It sounds more like a way to decrease the likelihood of the problem without special configuration. This is still good, but what do we know about the root cause so far?

MelanieW97 commented 1 month ago

Is #27969 really a fix for the root cause? It sounds more like a way to decrease the likelihood of the problem without special configuration. This is still good, but what do we know about the root cause so far?

That's exactly what I thought before @alan-agius4 clarified it's a fix. Thanks for asking. :)

alan-agius4 commented 1 month ago

It is an improvement to detect the maximum number of workers that can be used within containers instead of using NG_BUILD_MAX_WORKERS. For more details, see this issue comment.

This failure commonly occurred when the container lacked sufficient resources to manage the builds, particularly when using parallel builds.

ptandler commented 1 month ago

This failure commonly occurred when the container lacked sufficient resources to manage the builds, particularly when using parallel builds.

If the root cause is insufficient resources, is there a way to detect this and improve the error message? :thinking:

sergiubologa commented 1 month ago

This failure commonly occurred when the container lacked sufficient resources to manage the builds, particularly when using parallel builds.

If the root cause is insufficient resources, is there a way to detect this and improve the error message? 🤔

I guess because nobody reported that they managed to reproduce it on a local computer (usually with decent resources) it's good enough to consider it a lack of resources issue. Everybody reported that it only happens on CIs.

PhilippMeissner commented 1 month ago

[...] I guess because nobody reported that they managed to reproduce it on a local computer (usually with decent resources) it's good enough to consider it a lack of resources issue. Everybody reported that it only happens on CIs.

Still does not answer @ptandler`s point if it is possible to detect if there is insufficient resources and give a proper warning/error.

Yberion commented 1 month ago

Everybody reported that it only happens on CIs.

@sergiubologa no idea if it's the same issue, but I can reproduce such problem on local:

https://github.com/Yberion/angular-nx
pnpm install --no-frozen-lockfile
pnpm run lib:test:build

robertIsaac commented 1 month ago

@alan-agius4 I confirm that after setting NG_BUILD_MAX_WORKERS to 1, it stopped failing now in both ng build and ng serve I have one question, when we upgrade to Angular 18 (we will go directly to 18.1), do we still need this?

alan-agius4 commented 1 month ago

@robertIsaac, glad to hear that. No, there shouldn’t be need.

Plevi1337 commented 1 month ago

I upgraded an application to 18.1 because of this, and it's happening much less frequently, but I've just encountered a failed pipeline.

package.json:

"dependencies": {

    "@angular/animations": "18.1.1",
    "@angular/cdk": "18.1.1",
    "@angular/common": "18.1.1",
    "@angular/compiler": "18.1.1",
    "@angular/core": "18.1.1",
    "@angular/forms": "18.1.1",
    "@angular/material": "18.1.1",
    "@angular/material-luxon-adapter": "18.1.1",
    "@angular/platform-browser": "18.1.1",
    "@angular/platform-browser-dynamic": "18.1.1",
    "@angular/router": "18.1.1",
    "@azure/msal-angular": "3.0.22",
    "@azure/msal-browser": "3.19.1",
    "@ngx-translate/core": "15.0.0",    
    "rxjs": "7.8.1",
    "tslib": "2.6.3",
    "zone.js": "0.14.8"
<... REMOVED A FEW THAT IS NOT RELEVANT TO THIS...>
  },
  "devDependencies": {
    "@angular-eslint/builder": "18.1.0",
    "@angular-eslint/eslint-plugin": "18.1.0",
    "@angular-eslint/eslint-plugin-template": "18.1.0",
    "@angular-eslint/schematics": "18.1.0",
    "@angular-eslint/template-parser": "18.1.0",
    "@angular/build": "18.1.1",
    "@angular/cli": "18.1.1",
    "@angular/compiler-cli": "18.1.1",
    "@typescript-eslint/parser": "7.16.1",
    "eslint": "9.7.0",
    "typescript": "5.5.3"
<... REMOVED A FEW THAT IS NOT RELEVANT TO THIS...>
  }

I'm buliding it in a docker container after restoring with pnpm:

FROM node:20-alpine AS web-app-restore
COPY ./[REDACTED] ./app
WORKDIR /app

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
RUN node node_modules/@angular/cli/bin/ng build

2024-07-24T09:36:42.3518508Z ##[section]Starting: [REDACTED]
2024-07-24T09:36:42.3524793Z ==============================================================================
2024-07-24T09:36:42.3524949Z Task         : Command line
2024-07-24T09:36:42.3525020Z Description  : Run a command line script using Bash on Linux and macOS and cmd.exe on Windows
2024-07-24T09:36:42.3525126Z Version      : 2.237.1
2024-07-24T09:36:42.3525195Z Author       : Microsoft Corporation
2024-07-24T09:36:42.3525292Z Help         : https://docs.microsoft.com/azure/devops/pipelines/tasks/utility/command-line
2024-07-24T09:36:42.3525397Z ==============================================================================
2024-07-24T09:36:42.5268490Z Generating script.
2024-07-24T09:36:42.5279476Z Script contents:
2024-07-24T09:36:42.5280481Z docker build -t [REDACTED] --target [REDACTED] .
2024-07-24T09:36:42.5281092Z ========================== Starting Command Output ===========================
2024-07-24T09:36:42.5308327Z [command]/usr/bin/bash --noprofile --norc /home/vsts/work/_temp/a6853ee0-b08d-4bba-a8cf-54399c02a4bf.sh
2024-07-24T09:36:42.9391432Z #0 building with "default" instance using docker driver
2024-07-24T09:36:42.9391982Z 
2024-07-24T09:36:42.9392255Z #1 [internal] load build definition from Dockerfile
2024-07-24T09:36:42.9392546Z #1 transferring dockerfile: 4.11kB done
2024-07-24T09:36:42.9392789Z #1 DONE 0.0s
2024-07-24T09:36:42.9392960Z 
2024-07-24T09:36:42.9393579Z #2 [internal] load metadata for docker.io/library/node:20-alpine
2024-07-24T09:36:42.9393962Z #2 DONE 0.0s
2024-07-24T09:36:42.9394111Z 
2024-07-24T09:36:42.9394478Z #3 [internal] load metadata for mcr.microsoft.com/dotnet/sdk:8.0-alpine
2024-07-24T09:36:42.9394765Z #3 DONE 0.1s
2024-07-24T09:36:42.9395361Z 
2024-07-24T09:36:42.9395640Z #4 [internal] load metadata for docker.io/joshkeegan/zip:latest
2024-07-24T09:36:42.9871867Z #4 DONE 0.3s
2024-07-24T09:36:43.2086263Z 
2024-07-24T09:36:43.2087142Z #5 [internal] load .dockerignore
2024-07-24T09:36:43.2089719Z #5 transferring context: 388B done
2024-07-24T09:36:43.2089902Z #5 DONE 0.0s
2024-07-24T09:36:43.2089969Z 
2024-07-24T09:36:43.2091006Z #6 [[REDACTED] 1/5] FROM docker.io/joshkeegan/zip:latest@sha256:0bd6fa12624ffca089d0746a387dacf8c72018db9b9c1f21e9ac72d86c045447
2024-07-24T09:36:43.2091228Z #6 DONE 0.0s
2024-07-24T09:36:43.2091277Z 
2024-07-24T09:36:43.2091816Z #7 [dotnet-restore 1/7] FROM mcr.microsoft.com/dotnet/sdk:8.0-alpine@sha256:6e8997576d16a6d7b4e6ba7ac0956d3ae46cb7a376581c40eabd20fbc5c28b8d
2024-07-24T09:36:43.2092137Z #7 DONE 0.0s
2024-07-24T09:36:43.2092204Z 
2024-07-24T09:36:43.2092440Z #8 [web-app-restore 1/6] FROM docker.io/library/node:20-alpine
2024-07-24T09:36:43.2092691Z #8 DONE 0.0s
2024-07-24T09:36:43.2092757Z 
2024-07-24T09:36:43.2092915Z #9 [internal] load build context
2024-07-24T09:36:43.2093145Z #9 transferring context: 82.71kB 0.0s done
2024-07-24T09:36:43.2093314Z #9 DONE 0.1s
2024-07-24T09:36:43.2093362Z 
2024-07-24T09:36:43.2093659Z #10 [web-app-restore 5/6] RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
2024-07-24T09:36:43.2093958Z #10 CACHED
2024-07-24T09:36:43.2094023Z 
2024-07-24T09:36:43.2094242Z #11 [web-app-restore 4/6] RUN corepack enable
2024-07-24T09:36:43.2094456Z #11 CACHED
2024-07-24T09:36:43.2094537Z 
2024-07-24T09:36:43.2094762Z #12 [web-app-restore 2/6] COPY ./[REDACTED] ./app
2024-07-24T09:36:43.2095001Z #12 CACHED
2024-07-24T09:36:43.2095064Z 
2024-07-24T09:36:43.2095268Z #13 [web-app-restore 3/6] WORKDIR /app
2024-07-24T09:36:43.2095478Z #13 CACHED
2024-07-24T09:36:43.2095542Z 
2024-07-24T09:36:43.2095857Z #14 [web-app-restore 6/6] RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
2024-07-24T09:36:43.2096119Z #14 CACHED
2024-07-24T09:36:43.2096202Z 
2024-07-24T09:36:43.2096484Z #15 [[REDACTED] 1/1] RUN node node_modules/@angular/cli/bin/ng build [REDACTED]
2024-07-24T09:36:44.4280152Z #15 1.372 - Building...
2024-07-24T09:36:44.4281369Z #15 1.372 
2024-07-24T09:37:19.5318723Z #15 36.48 Application bundle generation failed. [35.098 seconds]
2024-07-24T09:37:19.5319273Z #15 36.48 
2024-07-24T09:37:19.6897105Z #15 36.48 ✘ [ERROR] Can't find stylesheet to import.
2024-07-24T09:37:19.6897610Z #15 36.48    ╷
2024-07-24T09:37:19.6897933Z #15 36.48 27 │ @use '@material/theme/selector-ext';
2024-07-24T09:37:19.6898242Z #15 36.48    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-07-24T09:37:19.6898456Z #15 36.48    ╵
2024-07-24T09:37:19.6898992Z #15 36.48   node_modules/.pnpm/@material+rtl@15.0.0-canary.7f224ddd4.0/node_modules/@material/rtl/_rtl.scss 27:1                                                                                                          @use
2024-07-24T09:37:19.6899636Z #15 36.48   node_modules/.pnpm/@material+elevation@15.0.0-canary.7f224ddd4.0/node_modules/@material/elevation/_elevation-theme.scss 33:1                                                                                  @use
2024-07-24T09:37:19.6900159Z #15 36.48   node_modules/.pnpm/@angular+material@18.1.1_@angular+animations@18.1.1_@angular+core@18.1.1_rxjs@7.8.1_zone.js@0_524xgukklzklncwxtrn3vxgbcm/node_modules/@angular/material/core/style/_elevation.scss 4:1     @use
2024-07-24T09:37:19.6900697Z #15 36.48   node_modules/.pnpm/@angular+material@18.1.1_@angular+animations@18.1.1_@angular+core@18.1.1_rxjs@7.8.1_zone.js@0_524xgukklzklncwxtrn3vxgbcm/node_modules/@angular/material/core/tokens/m3/mat/_app.scss 2:1   @use
2024-07-24T09:37:19.6901234Z #15 36.48   node_modules/.pnpm/@angular+material@18.1.1_@angular+animations@18.1.1_@angular+core@18.1.1_rxjs@7.8.1_zone.js@0_524xgukklzklncwxtrn3vxgbcm/node_modules/@angular/material/core/tokens/m3/_index.scss 3:1     @use
2024-07-24T09:37:19.6901997Z #15 36.48   node_modules/.pnpm/@angular+material@18.1.1_@angular+animations@18.1.1_@angular+core@18.1.1_rxjs@7.8.1_zone.js@0_524xgukklzklncwxtrn3vxgbcm/node_modules/@angular/material/core/tokens/_m3-tokens.scss 5:1    @use
2024-07-24T09:37:19.6903014Z #15 36.48   node_modules/.pnpm/@angular+material@18.1.1_@angular+animations@18.1.1_@angular+core@18.1.1_rxjs@7.8.1_zone.js@0_524xgukklzklncwxtrn3vxgbcm/node_modules/@angular/material/core/theming/_definition.scss 6:1  @forward
2024-07-24T09:37:19.6904272Z #15 36.48   node_modules/.pnpm/@angular+material@18.1.1_@angular+animations@18.1.1_@angular+core@18.1.1_rxjs@7.8.1_zone.js@0_524xgukklzklncwxtrn3vxgbcm/node_modules/@angular/material/_index.scss 7:1                    @use
2024-07-24T09:37:19.6904901Z #15 36.48   src/styles/styles.scss 1:1                                                                                                                                                                                    root stylesheet [plugin angular-sass]
2024-07-24T09:37:19.6905078Z #15 36.48 
2024-07-24T09:37:19.6905246Z #15 36.48     angular:styles/global:styles:1:8:
2024-07-24T09:37:19.6905488Z #15 36.48       1 │ @import 'src/styles/styles.scss';
2024-07-24T09:37:19.6905744Z #15 36.48         ╵         ~~~~~~~~~~~~~~~~~~~~~~~~
2024-07-24T09:37:19.6905883Z #15 36.48 
2024-07-24T09:37:19.6906001Z #15 36.48 
2024-07-24T09:37:19.7292118Z #15 ERROR: process "/bin/sh -c node node_modules/@angular/cli/bin/ng build [REDACTED]" did not complete successfully: exit code: 1
2024-07-24T09:37:19.7712705Z ------
2024-07-24T09:37:19.7713163Z  > [[REDACTED] 1/1] RUN node node_modules/@angular/cli/bin/ng build [REDACTED]:
2024-07-24T09:37:19.7773221Z 36.48   node_modules/.pnpm/@angular+material@18.1.1_@angular+animations@18.1.1_@angular+core@18.1.1_rxjs@7.8.1_zone.js@0_524xgukklzklncwxtrn3vxgbcm/node_modules/@angular/material/core/tokens/_m3-tokens.scss 5:1    @use
2024-07-24T09:37:19.7776688Z 36.48   node_modules/.pnpm/@angular+material@18.1.1_@angular+animations@18.1.1_@angular+core@18.1.1_rxjs@7.8.1_zone.js@0_524xgukklzklncwxtrn3vxgbcm/node_modules/@angular/material/core/theming/_definition.scss 6:1  @forward
2024-07-24T09:37:19.7777210Z 36.48   node_modules/.pnpm/@angular+material@18.1.1_@angular+animations@18.1.1_@angular+core@18.1.1_rxjs@7.8.1_zone.js@0_524xgukklzklncwxtrn3vxgbcm/node_modules/@angular/material/_index.scss 7:1                    @use
2024-07-24T09:37:19.7778157Z 36.48   src/styles/styles.scss 1:1                                                                                                                                                                                    root stylesheet [plugin angular-sass]
2024-07-24T09:37:19.7778443Z 36.48 
2024-07-24T09:37:19.7778851Z 36.48     angular:styles/global:styles:1:8:
2024-07-24T09:37:19.7779158Z 36.48       1 │ @import 'src/styles/styles.scss';
2024-07-24T09:37:19.7779400Z 36.48         ╵         ~~~~~~~~~~~~~~~~~~~~~~~~
2024-07-24T09:37:19.7779522Z 36.48 
2024-07-24T09:37:19.7779635Z 36.48 
2024-07-24T09:37:19.7779771Z ------
2024-07-24T09:37:19.7779885Z Dockerfile:108
2024-07-24T09:37:19.7780061Z --------------------
2024-07-24T09:37:19.7780175Z  106 |     
2024-07-24T09:37:19.7780389Z  107 |     FROM [REDACTED] // I have a multistage dockerfile, but should not be relevant
2024-07-24T09:37:19.7780680Z  108 | >>> RUN node node_modules/@angular/cli/bin/ng build [REDACTED]
2024-07-24T09:37:19.7780848Z  109 |     
2024-07-24T09:37:19.7780963Z  110 |     FROM scratch AS web-app
2024-07-24T09:37:19.7781144Z --------------------
2024-07-24T09:37:19.7781519Z ERROR: failed to solve: process "/bin/sh -c node node_modules/@angular/cli/bin/ng build [REDACTED]" did not complete successfully: exit code: 1
2024-07-24T09:37:19.7867764Z 
2024-07-24T09:37:19.7966976Z ##[error]Bash exited with code '1'.
2024-07-24T09:37:19.7982231Z ##[section]Finishing: [REDACTED]

alan-agius4 commented 1 month ago

Starting with version 18.1.2, @angular/material no longer depends on @material packages. This change should help decrease file resolution issues and minimize build failures related to resource constraints.

angular-automatic-lock-bot[bot] commented 2 weeks ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / angular-cli