Can't resolve all parameters for Directive

0

hej, próbuję sobie odpalić lokalnie jeden z projektów Angularowych znalezionych w internecie i mam mały problem. Przy uruchamianiu go, dostaję w przeglądarce błąd: "Uncaught Error: Can't resolve all parameters for LazyImgDirective: (?, ?, ?, ?)".

Poniżej kod LazyImgDirective:

import { AfterViewInit, ContentChild, Directive, ElementRef, Input, OnDestroy, Renderer2, Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { MatSnackBar } from '@angular/material';
import { InViewportDirective } from 'ng-in-viewport';
import { BehaviorSubject, Observable, Subscription, throwError } from 'rxjs';
import { catchError, delay, filter, take, tap } from 'rxjs/operators';

@Directive({
  selector: '[lazyImg]',
  exportAs: 'lazyImg'
})

export class LazyImgDirective implements AfterViewInit, OnDestroy {
  private static LOADING_CLASS_NAME = 'loading';
  private static LOADED_CLASS_NAME = 'loaded';

  private loading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  private loaded$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  private readonly subscription: Subscription = new Subscription();

  public get loading(): boolean {
    return this.loading$.getValue();
  }

  public set loading(value: boolean) {
    this.loading$.next(value);
    if (value) {
      this.renderer.addClass(this.elementRef.nativeElement, LazyImgDirective.LOADING_CLASS_NAME);
    } else {
      this.renderer.removeClass(this.elementRef.nativeElement, LazyImgDirective.LOADING_CLASS_NAME);
    }
  }

  public get loaded(): boolean {
    return this.loaded$.getValue();
  }

  public set loaded(value: boolean) {
    this.loaded$.next(value);
    if (value) {
      this.renderer.addClass(this.elementRef.nativeElement, LazyImgDirective.LOADED_CLASS_NAME);
    } else {
      this.renderer.removeClass(this.elementRef.nativeElement, LazyImgDirective.LOADED_CLASS_NAME);
    }
  }

  @Input('lazyImg') private src: string;

  @ContentChild(InViewportDirective) private inViewport: InViewportDirective;

  constructor(private elementRef: ElementRef, private http: HttpClient, private renderer: Renderer2, private snackBar: MatSnackBar) { }

  public ngAfterViewInit(): void {
    if (this.inViewport) {
      this.subscription.add(
        this.inViewport.inViewportAction
          .pipe(
            filter(({ visible }) => visible),
            take(1)
          )
          .subscribe(() => this.load())
      );
    }
  }

  public ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  public load(): void {
    this.loading = true;

    this.subscription.add(
      this.http.get(this.src, { responseType: 'blob' })
        .pipe(
          catchError(error => throwError(`Error during getting image from: ${this.src}`)),
          tap((data: Blob) => this.renderer.setAttribute(this.elementRef.nativeElement, 'src', URL.createObjectURL(data))),
          delay(10)
        )
        .subscribe(
          () => {
            this.loading = false;
            this.loaded = true;
          },
          (error) => {
            this.loading = false;
            this.snackBar.open(error, undefined, { duration: 3000, panelClass: 'error-snackbar' });
          }
        )
    );
  }
}

Co by trzeba zmienić/poprawić, żeby błąd nie występował, a aplikacja poprawnie się uruchomiła?

0

To prędzej jest coś z konfiguracją/importami niż z samym komponentem - ale ciężko tutaj zgadywać, czego to dotyczy dokładnie.
Popróbuj na swoim projekcie różnych rozwiązań, np.
https://stackoverflow.com/questions/59696113/uncaught-error-cant-resolve-all-parameters-for-userservice

0

Jak dla mnie to wyglada na to, ze nie dostarczasz w swoim module modułu HttpClientModule albo MatSnackBarModule. Zreszta komunikat dość jasno na to wskazuje.

1 użytkowników online, w tym zalogowanych: 0, gości: 1