Ng-lazyload-image: Angular 5에서는 작동하지 않습니다.

안녕하세요 @el-davo님,

신고해 주셔서 감사합니다. 서버 렌더링을 사용하고 있습니까? 아니면 앱을 미리 컴파일하시겠습니까? 아니면 개발 모드에서 앱을 실행하고 있습니까?

안녕. 아니요, 서버 측 렌더링을 수행하지 않습니다. 예, 현재 angular-cli를 사용하여 개발 모드에 있습니다.

어떤 브라우저를 사용하고 있습니까?
방금 cli(Angular 5)를 사용하여 새 Angular 앱을 만들었고 이를 재현할 수 없었습니다. 다음과 같이 변경했습니다.

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 46d517b..215f0c9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -6,15 +6,21 @@
   <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
 <h2>Here are some links to help you start: </h2>
+<img [defaultImage]="defaultImage" [lazyLoad]="image">
 <ul>
   <li>
     <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..cf8cead 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,4 +7,6 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app';
+  defaultImage = 'https://www.placecage.com/1000/1000';
+  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 926975a..7fb6d9d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,18 +1,13 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { AppComponent } from './app.component';

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
    BrowserModule,
+   LazyLoadImageModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

plnkr(https://embed.plnkr.co/rr046QU9YYWALdX7Xzf6/)도 만들었지만 오류를 재현할 수 없습니다.
오류를 재현하기 위해 작은 git repo 또는 plnkr을 만들 수 있다고 생각하십니까?

죄송합니다. 내 문제를 자세히 살펴보니 브라우저에서 모든 스크롤 이벤트를 비활성화하는 것처럼 보이는 이 CSS 조각이 있는 것으로 나타났습니다.

html, body {
  overflow-x: hidden;
}

이 문제를 해결하기 위해 다음과 같이 사용자 지정 스크롤 이벤트를 추가했습니다.

import {Component, Input} from '@angular/core';
import {Product} from '../products.state';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.scss']
})
export class ProductCardComponent {

  @Input() product: Product;
  scrollObservable = Observable.fromEvent(document.body, 'scroll');

  constructor() {
  }

}

그리고 내 템플릿에서

<a class="card clickable" [routerLink]="[product.id]">
  <div class="card-img">
    <img [lazyLoad]="product.logoUrl" [scrollObservable]="scrollObservable">
  </div>
  <div class="card-block">
    <span class="card-media-title">{{product.name}}</span>
    <div class="product-version">{{product.version}}</div>
    <div class="product-release-date">{{product.releaseDate}}</div>
  </div>
</a>

이제 Angular 5에서 완벽하게 작동합니다.