Angular [restService] error 400 {"Message":"The request is invalid."}

I am trying to display the values in the detailed View on click on search button. Below is my listView.html code.

<span class="link" ng-click="vm.openDetailsView(firmware.id)"><i class="fa fa-search"></i> View</span>

And respective listView typescript file, where Im passing firmware.id as parameter and redirecting to detail view page.

    openDetailsView(fwId: string) {
      this.$window.location.href = `#/firmwareCatalog/firmware/${fwId}`;
    }

My detailView.ts file shown below:

  export class FirmwareController {
    isLoading: boolean = false;

    private logger: ILogger;

    private firmwareId: any;

    private firmware: any;

    constructor(private $stateParams: any,
      logger: LoggerService,
      private firmwareService: FirmwareService,
      private modalService: ModalService,
      private $window: any) {

      this.reset();

      this.firmwareId = $stateParams.firmwareId;

      this.loadFirmwareDetails();

      this.logger = logger.getLogger('firmware');
    }

    loadFirmwareDetails() {
      this.isLoading = true;
      this.firmwareService.getFirmware(this.firmwareId)
        .then((fw: any) => {
          this.firmware = fw;
        })
        .finally(() => {
          this.isLoading = false;
        });
    }
  }

respective DetailView.service.ts file:

    private routes = {
      getFirmwareById: '/firmwares/{:firmwareId}',
    };

getFirmware(id: any): any {
      const uri = this.routes.getFirmwareById.replace('{:firmwareId}', id);
      return this.restService
        .get(uri, null, true)
        .then((response: any) => {
          if (response.data) {
            return response.data;
          }
        })
        .catch((response: any) => {
          return this.$q.reject(response);
        });
    }

Below is my Controller.cs:

[Route("firmwares/{firmwareId}")]
        [HttpGet]
        public Firmware GetById(int firmwareId)
        {
            this.logService.Debug($"Entering GET api/firmwares/{firmwareId}");

            var connectedUser = this.permissionService.GetConnectedUser();
            this.permissionService.CheckRolePermission(connectedUser.Role, PermissionConstant.ViewFirmwares);

            var result = Firmware.From(this.etpService.GetFirmwarefromEtpById(firmwareId));
            return result;
        }

Below is my model class :

public class Firmware
    {
        [JsonProperty("id")]
        public string Id { get; set; }

        [JsonProperty("deviceType")]
        public string DeviceType { get; set; }

        [JsonProperty("filename")]
        public string Filename { get; set; }

        [JsonProperty("size")]
        public int Size { get; set; }

        [JsonProperty("uploadDate")]
        public DateTime UploadDate { get; set; }

        [JsonProperty("url")]
        public string Url { get; set; }

        [JsonProperty("version")]
        public string Version { get; set; }

        public static EtpFirmwareModel From(EtpFirmwareModel model)
                => model == null ? null : new EtpFirmwareModel
                {
                    Id = model.Id,
                    DeviceType = model.DeviceType,
                    Filename = model.Filename,
                    Size = model.Size,
                    UploadDate = model.UploadDate,
                    Url = model.Url,
                    Version = model.Version
                };
    }

I am using GET verb inorder to get the data from API. and not able to hit to my Controller.cs file Here is the Error details :

[restService] {"Message":"The request is invalid."} 

I am new to angular, Please help me to fix this. Thanks in advance.

The error message "The request is invalid" means path is not correct that is written
#/firmwareCatalog/firmware/${fwId}

Please cross check the controller path. I can see the path mentioned in controller that is [Route("firmwares/{firmwareId}")]. so path should be firmwares instead of firmware.

Can you try the below path

this.$window.location.href = /firmwares/${fwId};