Warning : Deprecation $weight: Passing a number without unit % (60) is deprecated

[sahad78]

Which @angular/* package(s) are the source of the bug?

compiler-cli

Is this a regression?

Yes

Description

Hello,

I installed Angular 15(fresh install) and create a new project with the default boiler plate and I have the warning below when starting the project. Any idea where this is coming from? I've also tried upgrading one other project, on another computer, from Angular 14 to 15 and I get the same warning.

**ng: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation $weight: Passing a number without unit % (60) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

@material/slider/_slider-theme.scss 77:5 @use
node_modules/@angular/material/slider/_slider-theme.scss 3:1 @use
node_modules/@angular/material/core/density/private/_all-density.scss 25:1 @forward
@angular/_index.scss 18:1 @use
src/paprika.scss 4:1 root stylesheet**

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 15.0.0
Node: 18.12.1
Package Manager: npm 8.19.2
OS: darwin arm64

Angular: 15.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0
@angular-devkit/schematics      15.0.0
@schematics/angular             15.0.0
rxjs                            7.5.7
typescript                      4.8.4

Anything else?

No response

[jonaaix]

Can confirm this. I tried to build the components individually this way, but removing the slider theme as indicated in the error message did not help. So it might come from somewhere else.

@mixin my-components ($theme) {
   @include mat.core-theme($theme);
   @include mat.card-theme($theme);
   @include mat.progress-bar-theme($theme);
   @include mat.tooltip-theme($theme);
   @include mat.form-field-theme($theme);
   @include mat.input-theme($theme);
   @include mat.select-theme($theme);
   @include mat.autocomplete-theme($theme);
   @include mat.dialog-theme($theme);
   @include mat.chips-theme($theme);
   @include mat.slide-toggle-theme($theme);
   @include mat.radio-theme($theme);
   //@include mat.slider-theme($theme);
   @include mat.menu-theme($theme);
   //@include mat.list-theme($theme);
   @include mat.paginator-theme($theme);
   @include mat.tabs-theme($theme);
   @include mat.checkbox-theme($theme);
   @include mat.button-theme($theme);
   @include mat.icon-button-theme($theme);
   //@include mat.fab-theme($theme);
   //@include mat.snack-bar-theme($theme);
   //@include mat.table-theme($theme);
   @include mat.progress-spinner-theme($theme);
   @include mat.badge-theme($theme);
   //@include mat.bottom-sheet-theme($theme);
   @include mat.button-toggle-theme($theme);
   @include mat.datepicker-theme($theme);
   //@include mat.divider-theme($theme);
   @include mat.expansion-theme($theme);
   //@include mat.grid-list-theme($theme);
   @include mat.icon-theme($theme);
   @include mat.sidenav-theme($theme);
   //@include mat.stepper-theme($theme);
   @include mat.sort-theme($theme);
   @include mat.toolbar-theme($theme);
   //@include mat.tree-theme($theme);
}

[crisbeto]

Duplicate of #25980.

[luisrodriguesds]

I already updated my dependencies and the warning still appearing

"dependencies": {
    "@angular/animations": "^15.0.1",
    "@angular/common": "^15.0.1",
    "@angular/compiler": "^15.0.1",
    "@angular/core": "^15.0.1",
    "@angular/forms": "^15.0.1",
    "@angular/platform-browser": "^15.0.1",
    "@angular/platform-browser-dynamic": "^15.0.1",
    "@angular/router": "^15.0.1",
    "@angular/service-worker": "^15.0.1",
    "@angular/cdk": "^15.0.0",
    "@angular/material": "^15.0.0",
    "@js-temporal/polyfill": "^0.4.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  }`
Any ideas? 

[vitesagar]

I have updated angular 15.0.1 and getting same error, also all dependencies are up to date still getting same.

[crisbeto]

Angular Material 15.0.1 hasn't been released yet. It should be some time on Wednesday.

[sahad78]

I've upgraded to 15.0.1 and the issue is still there!

[mattiLeBlanc]

I don't see 15.0.1 available in npm yet. How did you install it?

[jonaaix]

It's gone after installing "@angular/material": "^15.0.1",
Run npm install -S @angular/material@15.0.1

[diego-bevilaqua86]

Well, I must be doing something wrong, then. I just started a fresh, clean project, the same way OP did - fresh Node v18 install, fresh @angular/cli v15.0.2 global install through npm, ng new project and and ng add @angular/material. It installed the latest material (v15.0.1), and yet I can't apply the typography as was expected prior to @angular/material v15.x.x.

[angular-automatic-lock-bot]

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.}