feat(lazy images): replace ngx-progressive-image-loader for ng-lazyload-image

Author: Ismael Ramos

README.md

@@ -65,7 +65,7 @@
 * Following the [best practices](https://angular.io/guide/styleguide)!
 * Search bar, to look for heroes
 * Custom loading page
-* Lazy loading images with [ngx-progressive-image-loader](https://github.com/maxisam/ngx-progressive-image-loader)
+* Lazy loading images with [ng-lazyload-image](https://github.com/tjoskar/ng-lazyload-image)
 * Modal and toasts (snakbar)!
 * Scroll restoration and anchor examples
 * Responsive layout (flex layout module)

angular.json

@@ -29,11 +29,6 @@
                 "input": "src/assets/images",
                 "output": "/assets/images"
               },
-              {
-                "glob": "favicon.ico",
-                "input": "src",
-                "output": "/assets/common"
-              },
               {
                 "glob": "sitemap.xml",
                 "input": "src/assets",
@@ -57,7 +52,6 @@
             ],
             "styles": [
               "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
-              "node_modules/ngx-progressive-image-loader/ngx-progressive-image-loader.scss",
               "src/assets/css/reset.css",
               "src/assets/css/loading.css",
               "src/app/shared/styles/global.scss"
@@ -205,11 +199,6 @@
                 "input": "src/assets",
                 "output": "/assets"
               },
-              {
-                "glob": "favicon.ico",
-                "input": "src",
-                "output": "/"
-              },
               {
                 "glob": "sitemap.xml",
                 "input": "src/assets",

functions/package-lock.json

@@ -46,9 +46,9 @@
     "helmet": "3.18.0",
     "moment": "2.24.0",
     "ng-animate": "0.3.4",
+    "ng-lazyload-image": "5.1.2",
     "ngx-cookie": "4.1.2",
     "ngx-logger": "3.3.13",
-    "ngx-progressive-image-loader": "4.0.0-beta.15",
     "ngx-window-token": "2.0.1",
     "reflect-metadata": "0.1.13",
     "rxjs": "6.5.2",

functions/package.json

@@ -66,9 +66,9 @@
     "grpc": "1.21.1",
     "helmet": "3.18.0",
     "ng-animate": "0.3.4",
+    "ng-lazyload-image": "5.1.2",
     "ngx-cookie": "4.1.2",
     "ngx-logger": "3.3.13",
-    "ngx-progressive-image-loader": "4.0.0-beta.15",
     "rxjs": "6.5.2",
     "tslib": "1.10.0",
     "zone.js": "0.9.1"

package-lock.json

@@ -12,14 +12,14 @@ import {I18n} from '@ngx-translate/i18n-polyfill';
 import {HttpClientModule} from '@angular/common/http';
 import {registerLocaleData} from '@angular/common';
 import localeEs from '@angular/common/locales/es';
-import {NgxProgressiveImageLoaderModule} from 'ngx-progressive-image-loader';
 import {CookieModule} from 'ngx-cookie';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {TransferHttpCacheModule} from '@nguniversal/common';
 import {ROUTES_CONFIG, RoutesConfig} from './configs/routes.config';
 import {HomePageComponent} from './pages/home-page/home-page.component';
 import {Error404PageComponent} from './pages/error404-page/error404-page.component';
 import {ENDPOINTS_CONFIG, EndpointsConfig} from './configs/endpoints.config';
+import {LazyLoadImageModule} from 'ng-lazyload-image';
 
 declare const require;
 
@@ -38,7 +38,7 @@ registerLocaleData(localeEs, 'es');
         say: 'hello'
       }
     }),
-    NgxProgressiveImageLoaderModule.forRoot(),
+    LazyLoadImageModule.forRoot({}),
     CoreModule,
     SharedModule,
     AppRoutingModule

package.json

@@ -21,10 +21,6 @@
     </div>
   </mat-card-header>
   <a class="hero-detail-link" [routerLink]="hero.default ? [routesConfig.routes.heroes.detail(hero.id)] : []">
-    <ngx-progressive-image-loader *ngIf="isBrowser"
-                                  [filter]="'blur(3px) drop-shadow(0 0 0.75rem crimson)'"
-                                  [placeholderImageSrc]="hero.avatarBlurredUrl">
-      <img [src]="hero.avatarUrl" alt="avatar url" ngxProgressiveImage/>
-    </ngx-progressive-image-loader>
+    <img alt="{{hero.name}} hero image" [defaultImage]="hero.avatarBlurredUrl" [lazyLoad]="hero.avatarUrl">
   </a>
 </mat-card>

src/app/app.browser.module.ts

@@ -2,7 +2,6 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {HeroCardComponent} from './hero-card.component';
 import {Hero} from '../../../modules/heroes/shared/hero.model';
 import {configureTestSuite} from 'ng-bullet';
-import {MockComponent} from 'ng-mocks';
 import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
 import {MatSnackBar} from '@angular/material/snack-bar';
@@ -13,7 +12,7 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {ROUTES_CONFIG, RoutesConfig} from '../../../configs/routes.config';
 import {CookieService} from 'ngx-cookie';
 import {PLATFORM_ID} from '@angular/core';
-import {ProgressiveImageLoaderComponent} from 'ngx-progressive-image-loader';
+import {LazyLoadImageModule} from 'ng-lazyload-image';
 
 describe('HeroCardComponent', () => {
   let component: HeroCardComponent;
@@ -27,10 +26,10 @@ describe('HeroCardComponent', () => {
       imports: [
         RouterTestingModule,
         MatCardModule,
-        MatIconModule
+        MatIconModule,
+        LazyLoadImageModule
       ],
       declarations: [
-        MockComponent(ProgressiveImageLoaderComponent),
         HeroCardComponent
       ],
       providers: [

src/app/shared/components/hero-card/hero-card.component.html

@@ -13,8 +13,8 @@ import {NgxExampleLibraryModule} from '@ismaestro/ngx-example-library';
 import {HeroLoadingComponent} from './components/hero-loading/hero-loading.component';
 import {NgxScrollToFirstInvalidModule} from '@ismaestro/ngx-scroll-to-first-invalid';
 import {LoadingPlaceholderComponent} from './components/loading-placeholder/loading-placeholder.component';
-import {NgxProgressiveImageLoaderModule} from 'ngx-progressive-image-loader';
 import {CapitalizeFirstPipe} from './pipes/capitalize-first.pipe';
+import {LazyLoadImageModule} from 'ng-lazyload-image';
 
 @NgModule({
   imports: [
@@ -25,7 +25,7 @@ import {CapitalizeFirstPipe} from './pipes/capitalize-first.pipe';
     RouterModule,
     NgxExampleLibraryModule,
     NgxScrollToFirstInvalidModule,
-    NgxProgressiveImageLoaderModule
+    LazyLoadImageModule
   ],
   declarations: [
     HeaderComponent,
@@ -50,8 +50,8 @@ import {CapitalizeFirstPipe} from './pipes/capitalize-first.pipe';
     HeroLoadingComponent,
     NgxScrollToFirstInvalidModule,
     LoadingPlaceholderComponent,
-    NgxProgressiveImageLoaderModule,
-    CapitalizeFirstPipe
+    CapitalizeFirstPipe,
+    LazyLoadImageModule
   ]
 })