迁移到 Angular 材料从 14 到 15 失败

Question

Following the migration guide i try to run

ng generate @angular/material:mdc-migration

This is the output i get:

? Limit the migration to a specific directory? (Enter the relative path such as 'src/app/shared' or leave blank for all directories) src/app/shared
? What components do you want to migrate? Button, Card, Checkbox
    Limiting migration to: src/app/shared
    Migrating components:
    button
    card
    checkbox
    Migrating project: dummy-frontend
Cannot read properties of undefined (reading 'length')

UPDATE:

i was able to run the script folder by folder

Answer 1

we had the exact same error when migrating and we found that the components that were failing were the one with a template instead of a templateUrl , and with concatenation inside the template like this one:

@Component({
  selector: 'app-dashboard-avancement-graph-dialog',
  template: '<app-dialog-container>' +
              '<app-dashboard-avancement-graph ' +
                '[isFicheRex]="isFicheRex" ' +
                '[perimeterSearch]="operationsParams" ' +
                '[grapheOptions]="grapheOptions" ' +
                '[autoload]="true">' +
              '</app-dashboard-avancement-graph>' +
            '</app-dialog-container>'
})
export class DashboardAvancementGraphDialogComponent {
  @Input() public grapheOptions: GrapheOptionsParameters;
  @Input() public operationsParams: PerimeterSearch;
  @Input() public speSearch: SpecificSearch;
  @Input() public isFicheRex = false;
}

If you replace the quotes and concatenation by back tick the migration succeed:

@Component({
  selector: 'app-dashboard-avancement-graph-dialog',
  template: `<app-dialog-container>
              <app-dashboard-avancement-graph 
                [isFicheRex]="isFicheRex" 
                [perimeterSearch]="operationsParams" 
                [grapheOptions]="grapheOptions" 
                [autoload]="true">
              </app-dashboard-avancement-graph>
            </app-dialog-container>`
})
export class DashboardAvancementGraphDialogComponent {
  @Input() public grapheOptions: GrapheOptionsParameters;
  @Input() public operationsParams: PerimeterSearch;
  @Input() public speSearch: SpecificSearch;
  @Input() public isFicheRex = false;
}