I am upgrading my Angular project from v8 to v17. While building the project,
I am facing this issue: Argument of type ‘OperatorFunction<unknown, any>’ is not assignable to parameter of type

Error: src/app/shared/directives/responsive-columns.directive.ts:46:9 – error TS2345: Argument of type ‘OperatorFunction<unknown, any>’ is not assignable to parameter of type ‘OperatorFunction<MediaChange[], any>’.
Types of parameters ‘source’ and ‘source’ are incompatible.
Type ‘Observable<MediaChange[]>’ is not assignable to type ‘Observable’.
The types of ‘source.operator.call’ are incompatible between these types.
Type ‘(subscriber: import(“/home/sysadmin/Downloads/node_modules/rxjs/internal/Subscriber”).Subscriber, source: any) => import(“/home/sysadmin/Downloads/node_modules/rxjs/internal/types”).TeardownLogic’ is not assignable to type ‘(subscriber: import(“/home/sysadmin/Downloads/Angular Upgrade/Angular8to17/creta/node_modules/rxjs/dist/types/internal/Subscriber”).Subscriber, source: any) => import(“/home/sysadmin/Downloads/Angular Upgrade/Angular8to17/creta/node_modules/rxjs/dist/types/internal/types”).TeardownLogic’.
Types of parameters ‘subscriber’ and ‘subscriber’ are incompatible.
Type ‘Subscriber’ is missing the following properties from type ‘Subscriber’: syncErrorValue, syncErrorThrown, syncErrorThrowable, _unsubscribeAndRecycle, and 3 more.

map((changes) => {
const matchingAliases = changes
…
return this.responsiveColumns[matchedAlias];
})

Error: src/app/shared/directives/responsive-columns.directive.ts:48:14 – error TS2339: Property ‘map’ does not exist on type ‘unknown’.

.map((change) => this.mapAlias(change.mqAlias))

Error: src/app/shared/directives/responsive-columns.directive.ts:70:24 – error TS2345: Argument of type ‘import(“/home/sysadmin/Downloads/node_modules/rxjs/internal/Subscription”).Subscription’ is not assignable to parameter of type ‘import(“/home/sysadmin/Downloads/Angular Upgrade/Angular8to17/creta/node_modules/rxjs/dist/types/internal/Subscription”).Subscription’.
Type ‘Subscription’ is missing the following properties from type ‘Subscription’: _parentage, _finalizers, _hasParent, _removeParent

this.watchers.push(mediaWatcher);

Here is the .directive.ts file:

import { Directive, Input, OnDestroy, OnInit } from "@angular/core";
import { MediaObserver } from "@angular/flex-layout";
import { MatGridList } from "@angular/material/grid-list";
import { Subscription } from "rxjs";
import { map } from "rxjs/operators";

export interface ResponsiveColumnsMap {
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
}
@Directive({
  selector: "[responsiveColumns]",
})
export class ResponsiveColumnsDirective implements OnInit, OnDestroy {
  private static readonly DEFAULT_COLUMNS_MAP: ResponsiveColumnsMap = {
    xs: 1,
    sm: 2,
    md: 4,
    lg: 6,
    xl: 12,
  };

  @Input() private responsiveColumns: ResponsiveColumnsMap;

  private readonly watchers: Subscription[] = [];

  constructor(
    private readonly grid: MatGridList,
    private readonly mediaObserver: MediaObserver
  ) {}

  ngOnInit(): void {
    this.responsiveColumns =
      this.responsiveColumns || ResponsiveColumnsDirective.DEFAULT_COLUMNS_MAP;

    const mediaWatcher = this.mediaObserver
      .asObservable()
      .pipe(
        map((changes) => {
          const matchingAliases = changes
            .map((change) => this.mapAlias(change.mqAlias))
            // SORT BY NUMBER OF COLUMNS DESC
            .sort(
              (a, b) => this.responsiveColumns[b] - this.responsiveColumns[a]
            )
            // DOUBLECHECK
            .filter((alias) =>
              Object.keys(this.responsiveColumns).includes(alias)
            )
            // TRIPLECHECK
            .filter((alias) => this.mediaObserver.isActive(alias));

          const matchedAlias =
            matchingAliases.length > 0
              ? matchingAliases[0] // take the first matching alias (most cols)
              : "xs"; // default to xs

          return this.responsiveColumns[matchedAlias];
        })
      )
      .subscribe((cols) => (this.grid.cols = cols));

    this.watchers.push(mediaWatcher);
  }


  private mapAlias(mqAlias: string): string {
    if (!mqAlias.includes("-")) {
      return mqAlias;
    }

    const parts = mqAlias.split("-");
    const ltOrGt = parts[0];
    const alias = parts[1];

    const keys = Object.keys(this.responsiveColumns);
    const index = keys.indexOf(alias);

    return ltOrGt === "lt" ? keys[index - 1] : keys[index + 1];
  }
}

Please help resolving the issues. Been stuck since 2 days.