CODEWITHSUNDEEP
angularangular-material
jheetd
jheetd

Reputation: 53

can angular v15 work without material migration?

Could someone explain to me please, when you do angular upgrade to v15 from v14 is the material migration mandatory? Because the angular upgrade guide tells that you can use old(v14) material modules implementations by simply using legacy modules?

https://rc.material.angular.io/guide/mdc-migration ,,The old implementation of each new component is now deprecated, but still available from a "legacy" import. For example, you can import the old mat-button implementation can be used by importing the legacy button module.".

I upgraded the angular and material to v15, but it seems that the legacy modules are not working at all, all of the user interface is broken?

Upvotes: 4

Views: 8596

Answers (5)

Novaterata
Novaterata

Reputation: 4809

Here are the peerDependencies for @angular/material 14:

  "peerDependencies": {
    "@angular/animations": "^14.0.0 || ^15.0.0",
    "@angular/cdk": "14.2.7",
    "@angular/core": "^14.0.0 || ^15.0.0",
    "@angular/common": "^14.0.0 || ^15.0.0",
    "@angular/forms": "^14.0.0 || ^15.0.0",
    "@angular/platform-browser": "^14.0.0 || ^15.0.0",
    "rxjs": "^6.5.3 || ^7.4.0"
  },

So yes, you can use Angular Material 14 (and CDK) with Angular 15. I'm using a bespoke non-angular-cli build (not my idea) and this works fine for us

Upvotes: 2

jheetd
jheetd

Reputation: 53

The answer is that you need to import legacy prebuild theme in styles.css if you want to use legacy components. For me the ng update material did not change prebuild theme to legacy prebuild theme.

Upvotes: 0

JSON Derulo
JSON Derulo

Reputation: 17861

Just updating the dependencies is not sufficient when performing an Angular major update. Like usual, you need to use ng update to run the migrations provided by the Angular team:

ng update @angular/core@15 @angular/cli@15
ng update @angular/material@15

For more information, see Angular's update guide.

If you use ng update, your project should work like before, your imports will be re-written to the legacy modules.

At a later point you can decide, whether to migrate a few or all components to MDC, with the help of the MDC migration tool.

Upvotes: 1

MGX
MGX

Reputation: 3531

You have to update Angular Material because Angular Material have peer dependencies on Angular.

So if you use Angular Material 14, you have to use Anguar 14. Same for 15.

If you use Angular 15, and Angular Material 14, then the peer dependencies are not met.

And it does not work anymore because in v15 Angular Material does NOT include the typography for components. You have to add it yourself.

If you use a custom theme :

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
   warn: $my-warn,
 ),
 typography: mat.define-typography-config(), // <-- THIS LINE
 density: 0,
));

Follow their guide to make it work.

Upvotes: 4

Schrader
Schrader

Reputation: 490

Can you give more informations? Normaly it should migrate automatically your modules to a working but deprecated module.

Example:

import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';

Did you try to remove-reinstall your node modules?

Upvotes: 0

Related Questions