Cannot use ngx-split-button with Angular 17

[VaporMontey]

Hello, I'm trying to use the package with Angular 17 and I'm having trouble with the styling settings: I've followed these steps to install the package:

1. npm i @material-spirit/ngx-split-button
2. add MasSplitButtonModule to imports of app.module.ts
3. adding the following code to style.scss

@use '@material-spirit/ngx-split-button' as mas-split-button;

@include mas-split-button.core-styles;

$my-theme: mat.define-light-theme((
 ...
));

@include mas-split-button.theme($my-theme);

The issue I have on the console is the following and I can't resolve it:

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined mixin.
    ╷
31  │ ┌   @include mat.private-disable-mdc-fallback-declarations {
32  │ │     // This call will render some base MDC-button styles. If mat button is already included, it will
33  │ │     // result in those styles being duplicated.
34  │ │     // Currently split-button depends on regular button also being included into an app.
35  │ │     //@include mdc-button.static-styles-without-ripple($query: mdc-helpers.$mdc-base-styles-query);
36  │ │ 
37  │ │     //**** Styles for all button types
38  │ │ 
39  │ │     .mdc-button.mas-split-button {
40  │ │       &__action-button {
41  │ │         @include mdc-button-shared-theme.horizontal-padding(
42  │ │           $padding: mdc-button-shared-theme.$contained-horizontal-padding,
43  │ │           $padding-icon: mdc-button-shared-theme.$contained-horizontal-padding-icon
44  │ │         );
45  │ │       }
46  │ │     }
47  │ │ 
48  │ │ 
49  │ │     //**** Type-specific styles
50  │ │ 
51  │ │     .mas-split-button--text {
52  │ │       $text-theme: mdc-button-text-theme.$light-theme;
53  │ │ 
54  │ │       @include mdc-button-text-theme.theme-styles((
55  │ │         container-height: map.get($text-theme, container-height),
56  │ │         container-shape: map.get($text-theme, container-shape),
57  │ │       ));
58  │ │ 
59  │ │       .mas-split-button__action-button, .mas-split-button__menu-button {
60  │ │         @include mdc-button-text-theme.theme-styles((
61  │ │           label-text-color: inherit,
62  │ │           disabled-label-text-color: map.get($text-theme, disabled-label-text-color),
63  │ │           container-height: map.get($text-theme, container-height),
64  │ │         ));
65  │ │       }
66  │ │ 
67  │ │       .mas-split-button__action-button {
68  │ │         @include mdc-button-text-theme.theme-styles((
69  │ │           //container-shape: map.get($text-theme, container-shape),
70  │ │           container-shape: 4px 0 0 4px
71  │ │         ));
72  │ │       }
73  │ │ 
74  │ │       .mas-split-button__menu-button {
75  │ │         @include mdc-button-text-theme.theme-styles((
76  │ │           //container-shape: map.get($text-theme, container-shape),
77  │ │           container-shape: 0 4px 4px 0
78  │ │         ));
79  │ │ 
80  │ │         min-width: map.get($text-theme, container-height);       // overriding .mdc-button's min-width
81  │ │       }
82  │ │     }
83  │ │ 
84  │ │ 
85  │ │     .mas-split-button--filled {
86  │ │       $filled-theme: mdc-button-filled-theme.$light-theme;
87  │ │ 
88  │ │       @include mdc-button-filled-theme.theme-styles((
89  │ │         container-elevation: map.get($filled-theme, container-elevation),
90  │ │         hover-container-elevation: map.get($filled-theme, hover-container-elevation),
91  │ │         //focus-container-elevation: map.get($filled-theme, focus-container-elevation),
92  │ │         container-shadow-color: map.get($filled-theme, container-shadow-color),
93  │ │         container-height: map.get($filled-theme, container-height),
94  │ │         container-shape: map.get($filled-theme, container-shape),
95  │ │       ));
96  │ │ 
97  │ │       .mas-split-button__action-button, .mas-split-button__menu-button {
98  │ │         @include mdc-button-filled-theme.theme-styles((
99  │ │           container-color: transparent,
100 │ │           disabled-container-color: map.get($filled-theme, disabled-container-color),
101 │ │           label-text-color: inherit,
102 │ │           disabled-label-text-color: map.get($filled-theme, disabled-label-text-color),
103 │ │           container-height: map.get($filled-theme, container-height),
104 │ │         ));
105 │ │       }
106 │ │ 
107 │ │       .mas-split-button__action-button {
108 │ │         @include mdc-button-filled-theme.theme-styles((
109 │ │           //container-shape: map.get($filled-theme, container-shape),
110 │ │           container-shape: 4px 0 0 4px
111 │ │         ));
112 │ │       }
113 │ │ 
114 │ │       .mas-split-button__menu-button {
115 │ │         @include mdc-button-filled-theme.theme-styles((
116 │ │           //container-shape: map.get($filled-theme, container-shape),
117 │ │           container-shape: 0 4px 4px 0
118 │ │         ));
119 │ │ 
120 │ │         min-width: map.get($filled-theme, container-height);       // overriding .mdc-button's min-width
121 │ │       }
122 │ │     }
123 │ │ 
124 │ │ 
125 │ │     .mas-split-button--elevated {
126 │ │       $elevated-theme: mdc-button-protected-theme.$light-theme;
127 │ │ 
128 │ │       @include mdc-button-protected-theme.theme-styles((
129 │ │         container-elevation: map.get($elevated-theme, container-elevation),
130 │ │         hover-container-elevation: map.get($elevated-theme, hover-container-elevation),
131 │ │         //focus-container-elevation: map.get($elevated-theme, focus-container-elevation),
132 │ │         container-shadow-color: map.get($elevated-theme, container-shadow-color),
133 │ │         container-height: map.get($elevated-theme, container-height),
134 │ │         container-shape: map.get($elevated-theme, container-shape),
135 │ │       ));
136 │ │ 
137 │ │       // In mat button styles, this call is done inside mdc-button.static-styles-without-ripple()
138 │ │       // Container doesn't need whole mdc-button.static-styles-without-ripple() because it has no padding.
139 │ │       // Also, elevation transition is applied to elevated button only.
140 │ │       @include mdc-button-base.raised-transition();
141 │ │ 
142 │ │       .mas-split-button__action-button, .mas-split-button__menu-button {
143 │ │         @include mdc-button-protected-theme.theme-styles((
144 │ │           container-color: transparent,
145 │ │           disabled-container-color: map.get($elevated-theme, disabled-container-color),
146 │ │           label-text-color: inherit,
147 │ │           disabled-label-text-color: map.get($elevated-theme, disabled-label-text-color),
148 │ │           container-height: map.get($elevated-theme, container-height),
149 │ │         ));
150 │ │       }
151 │ │ 
152 │ │       // Shape
153 │ │       .mas-split-button__action-button {
154 │ │         @include mdc-button-protected-theme.theme-styles((
155 │ │           //container-shape: map.get($elevated-theme, container-shape),
156 │ │           container-shape: 4px 0 0 4px
157 │ │         ));
158 │ │       }
159 │ │ 
160 │ │ 
161 │ │       .mas-split-button__menu-button {
162 │ │         @include mdc-button-protected-theme.theme-styles((
163 │ │           //container-shape: map.get($elevated-theme, container-shape),
164 │ │           container-shape: 0 4px 4px 0
165 │ │         ));
166 │ │ 
167 │ │         min-width: map.get($elevated-theme, container-height);       // overriding .mdc-button's min-width
168 │ │       }
169 │ │     }
170 │ │ 
171 │ │     .mas-split-button--outlined {
172 │ │       border-style: solid;
173 │ │ 
174 │ │       $outlined-theme: mdc-button-outlined-theme.$light-theme;
175 │ │ 
176 │ │       @include mdc-button-outlined-theme.theme-styles((
177 │ │         container-height: map.get($outlined-theme, container-height),
178 │ │         container-shape: map.get($outlined-theme, container-shape),
179 │ │         outline-color: map.get($outlined-theme, outline-color),
180 │ │         outline-width: map.get($outlined-theme, outline-width),
181 │ │         pressed-outline-color: map.get($outlined-theme, pressed-outline-color)
182 │ │       ));
183 │ │ 
184 │ │       // Previous mdc-button-outlined-theme.theme-styles() adds padding if outline-width is specified.
185 │ │       // This will remove padding for container.
186 │ │       padding: 0;
187 │ │ 
188 │ │       .mas-split-button__action-button, .mas-split-button__menu-button {
189 │ │         @include mdc-button-outlined-theme.theme-styles((
190 │ │           label-text-color: inherit,
191 │ │           disabled-label-text-color: map.get($outlined-theme, disabled-label-text-color),
192 │ │           container-height: map.get($outlined-theme, container-height),
193 │ │         ));
194 │ │       }
195 │ │ 
196 │ │       .mas-split-button__action-button {
197 │ │         @include mdc-button-outlined-theme.theme-styles((
198 │ │           //container-shape: map.get($elevated-theme, container-shape),
199 │ │           container-shape: 4px 0 0 4px
200 │ │         ));
201 │ │       }
202 │ │ 
203 │ │       .mas-split-button__menu-button {
204 │ │         @include mdc-button-outlined-theme.theme-styles((
205 │ │           //container-shape: map.get($elevated-theme, container-shape),
206 │ │           container-shape: 0 4px 4px 0
207 │ │         ));
208 │ │ 
209 │ │         min-width: map.get($outlined-theme, container-height);       // overriding .mdc-button's min-width
210 │ │       }
211 │ │     }
212 │ └   }
    ╵
  node_modules\@material-spirit\ngx-split-button\_split-button-base.scss 31:3  core-styles()
  src\styles.scss 91:1                                                         root stylesheet

× Failed to compile.

Is there something I'm doing wrong or the package isn't compatible with Angular 17?

Best regards

[klyakh]

The current version (v1.0.1) is not compatible with Angular 17.

The Split Button was reusing Angular Material styles (SCSS), which have changed significantly. I'm working on the new version but can't provide a timeline at the moment.