Error updating to angular 18

[EdwardMoyse]

After yarn start I see:

Warning: /Users/emoyse/LocalDocuments/phoenix/packages/phoenix-event-display/dist/managers/three-manager/index.js depends on 'html2canvas'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies



./projects/phoenix-app/src/styles.scss - Error: Module build failed (from ../../node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
Undefined function.
  ╷
5 │ $primary: mat.define-palette(mat.$teal-palette);
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  projects/phoenix-ui-components/_theming.scss 5:11  @import
  projects/phoenix-app/src/styles.scss 1:9           root stylesheet

./projects/phoenix-app/src/styles.scss?ngGlobalStyle - Error: Module build failed (from ../../node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ../../node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
Undefined function.
  ╷
5 │ $primary: mat.define-palette(mat.$teal-palette);
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  projects/phoenix-ui-components/_theming.scss 5:11  @import
  projects/phoenix-app/src/styles.scss 1:9           root stylesheet


_59d2.js                                                        | xhr2                         | 269 bytes | 
_cd9c.js                                                        | tmp                          | 266 bytes | 
_28b2.js                                                        | fs                           | 263 bytes | 
_2d7d.js                                                        | gl                           | 263 bytes | 
_4c9e.js                                                        | fs                           | 263 bytes | 
_a22b.js                                                        | fs                           | 263 bytes | 

Build at: 2024-06-13T17:18:00.201Z - Hash: 2ded98bc2bfa357b - Time: 23737ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✖ Failed to compile.
✔ Browser application bundle generation complete.

Initial chunk files | Names   | Raw size
main.js             | main    |  1.16 MB | 
runtime.js          | runtime | 14.47 kB | 

48 unchanged chunks

Build at: 2024-06-13T17:18:03.425Z - Hash: 4d755261db2305ea - Time: 2767ms

./projects/phoenix-app/src/styles.scss - Error: Module build failed (from ../../node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
Undefined function.
  ╷
5 │ $primary: mat.define-palette(mat.$teal-palette);
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  projects/phoenix-ui-components/_theming.scss 5:11  @import
  projects/phoenix-app/src/styles.scss 1:9           root stylesheet

./projects/phoenix-app/src/styles.scss?ngGlobalStyle - Error: Module build failed (from ../../node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ../../node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
Undefined function.
  ╷
5 │ $primary: mat.define-palette(mat.$teal-palette);
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  projects/phoenix-ui-components/_theming.scss 5:11  @import
  projects/phoenix-app/src/styles.scss 1:9           root stylesheet