CODEWITHSUNDEEP
angularangular-materialangular15angular-migrationangular-material-15
Ram Anugandula
Ram Anugandula

Reputation: 614

Error after migrating 14 to 15 in dependent project?

I have FrontDesk/FrontDesk.UserInterface project have updated all the packages to Angular 15.You can check the screenshot below.

enter image description here

I executed the following command ng generate @angular/material:mdc-migration, which automatically updated all components in the FrontDesk/FrontDesk.UserInterface.

Afterward, I attempted to build the FrontDesk/FrontDesk.UserInterface project. However, all the errors that were thrown pertained to Shared/Shared.UserInterface2 except for one error in FrontDesk/FrontDesk.UserInterface within angular-routing.module.ts.

When attempting to update Angular and Material packages,

Shared/Shared.UserInterface2 > ng update @angular/core@15 @angular/cli@15

I encountered following error: This command is not available when running cli outside workspace.

After some research, I discovered that the angular.json file is missing from this project. This is why I couldn't update the packages directly. Nonetheless, I was able to install Angular and Material 15 packages in Shared/Shared.UserInterface2.

I then executed a command ng install @angular/material:mdc-migration to migrate material components in Shared/Shared.UserInterface2.

I attempted to install material-mdc-migration and generate material:mdc-migration both failed.

After build FrontDesk/FrontDesk.UserInterface there most repetitive issues one is angular material theming error and mat-chip-list errors in Shared/Shared.UserInterface2 I have failed to resolve two repetitive issues.

  1. How to resolve Angular/Material/Theming Error? I tried to uninstall and reinstall material packages in dependent project Shared.Shared.UserInterface2 but it didn't work and I was unable to find node_modules/@angular/material/theming folder.

enter image description here

  1. How could I execute material-mdc-migration in Shared/Shared.UserInterface2? If its not possible then what should be my approach? enter image description here

I assume once we were able to execute the material-mdc-migration command It would automatically resolve material related issues in Shared/Shared.UserInterfac2.

Any help will be appreciated. Thanks in Advance

Upvotes: 1

Views: 77

Answers (1)

Naren Murali
Naren Murali

Reputation: 56678

Remove that import and try adapting your code to mimic the below working example.

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$theme-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$theme: mat.define-light-theme((
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
  ),
  typography: mat.define-typography-config(),
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($theme);

Stackblitz Demo

Upvotes: 1

Related Questions