Angular Material Stepper not working anymore

Question

I have been recently trying to deploy the project to production, and for this cause I have been playing with angular.json baseHref value and deployUrl values. I also added the HashLocationStrategy in order to make the web display fine in the Apache server, since there is no other way to make it work. (I'm saying this since I don't know if this can be affecting to the functionality of the project).

Now, the issue is happening even in dev mode. I have a stepper that was working, and for some reason methods stepper.next(), stepper.previous() or stepper.reset() are just not working.

sign-and-send.component.html

    <mat-horizontal-stepper [linear]="true" #stepper class="stepper_custom">
  <mat-step [stepControl]="firstFormGroup" required>
    <ng-template matStepLabel>Carga un PDF</ng-template>
    <div class="Hflex">
    <mat-form-field style="width: 50vw;">
      <mat-label>Cargar archivo PDF</mat-label>
      <ngx-mat-file-input
        appearance="outline"
        placeholder="Cargar archivo PDF"
        [accept]="'.pdf'"
        (change)="load_pdf($event)"
        required
      ></ngx-mat-file-input>
      <mat-icon matSuffix>folder</mat-icon>
    </mat-form-field>
    <button type="button" mat-raised-button color="primary" (click)="stepper.next()">Continuar<mat-icon>play_arrow</mat-icon></button>
    </div>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <ng-template matStepLabel>Elige sello</ng-template>
    <div class="Hflex">
      <button type="button" mat-raised-button color="primary" (click)="stepperForward(stepper)"><mat-icon class="backwards">play_arrow</mat-icon>Opción previa</button>
    <mat-form-field color="primary">
      <mat-label>Elige Sello</mat-label>
      <mat-select [(value)]="selloElegido"
      (selectionChange)="add_sello(add_image)"
      [disabled]="sellos_disabled">
        <mat-option value="f">Ferretería
          <img width="50%" height="50%" src="../../../assets/img/SelloFerre.png"/>
        </mat-option>
        <mat-option value="c"
          >Cerámicas
          <img
            width="50%"
            height="50%"
            src="../../../assets/img/SelloCeram.png"
          />
        </mat-option>
      </mat-select>
   </mat-form-field>

  <mat-checkbox [(ngModel)]="firmado" checked=true color="primary" (change)="add_sello(add_image)" [disabled]="firmado_disabled">Añadir mi firma</mat-checkbox>
  <button type="button" mat-raised-button color="primary" (click)="stepper.next()">Continuar<mat-icon>play_arrow</mat-icon></button>
  </div>

  </mat-step>
  <mat-step [stepControl]="thirdFormGroup">
    <ng-template matStepLabel>Elige qué hojas firmar</ng-template>
    <div class="Hflex">
      <button type="button" mat-raised-button color="primary" (click)="stepper.previous()"><mat-icon class="backwards">play_arrow</mat-icon>Opción previa</button>
    <mat-radio-group
  color="primary"
  class="radio-group"
  [(ngModel)]="hojas_firmada_elegida"
  (change)="add_sello(add_image)">
  <mat-radio-button class="hojas_firmar_radio-button" *ngFor="let tipo of hojas_firmadas" [value]="tipo">
    {{tipo}}
  </mat-radio-button>
</mat-radio-group>
<button type="button" mat-raised-button color="primary" (click)="stepper.next()">Continuar<mat-icon>play_arrow</mat-icon></button>
</div>
  </mat-step>
  <mat-step [stepControl]="fourthFormGroup">
    <ng-template matStepLabel>Enviar por correo electrónico</ng-template>
    <div class="Hflex">
      <button type="button" mat-raised-button color="primary" (click)="stepper.previous()"><mat-icon class="backwards">play_arrow</mat-icon>Opción previa</button>

    <mat-form-field color="primary" appearance="fill" style="width: 25vw;text-align:center;">
      <mat-icon matPrefix>email</mat-icon>
      <mat-label>Inserte aquí el email</mat-label>
      <input matInput type="email" [(ngModel)]="correoelectronico" />
    </mat-form-field>
     <button button type="button" mat-raised-button color="primary" class="enviarbutton" (click)="contactForm()"><div class="div1">Enviar</div><div class="div2"><mat-icon>send</mat-icon></div></button>
    <a *ngIf="fileURL" [href]="fileURL" download="file.pdf">Descarga</a>
  </div>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Listo</ng-template>
    <p>Listo.</p>
    <div>
      <button mat-raised-button color="primary" (click)="stepper.reset()">Firmar otro PDF</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

In the ts code I also use the ViewChild to access the stepper as follows:

@ViewChild('stepper',{static:true}) private myStepper: MatStepper;

So I can programmatically use this.myStepper.next();

I don't see any error in the code, I'm identifing the stepper as #stepper in the html, and using it accordingly. The code was working, but with recent changes out of this component on top mentioned, I don't know if they can affect components in some way.