Fixed issue "Failed to load lazy-img.component.scss"

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Nav, Platform } from 'ionic-angular';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
-import { ImgCacheService } from '../global';
+import { ImgCacheProvider} from "../providers/img-cache/img-cache";
 
 @Component({
   templateUrl: 'app.html'
@@ -15,7 +15,7 @@ export class OfflineApp {
 
   public rootPage = 'TabsPage';
 
-  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, imgCacheService: ImgCacheService) {
+  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, imgCacheService: ImgCacheProvider) {
     platform.ready().then(() => {
       statusBar.styleDefault();
       splashScreen.hide();

src/app/app.module.ts

@@ -1,33 +1,37 @@
-import { NgModule, ErrorHandler } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { File } from '@ionic-native/file';
+import {NgModule, ErrorHandler} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {File} from '@ionic-native/file';
 
-import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
-import { StatusBar } from '@ionic-native/status-bar';
-import { SplashScreen } from '@ionic-native/splash-screen';
+import {IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular';
+import {StatusBar} from '@ionic-native/status-bar';
+import {SplashScreen} from '@ionic-native/splash-screen';
 
-import { OfflineApp } from './app.component';
-import { CacheImgModule } from '../global';
+import {OfflineApp} from './app.component';
+import {ComponentsModule} from "../components/components.module";
+import {DirectivesModule} from "../directives/directives.module";
+import {ImgCacheProvider} from '../providers/img-cache/img-cache';
 
 @NgModule({
   declarations: [
     OfflineApp,
   ],
   imports: [
     BrowserModule,
+    ComponentsModule,
+    DirectivesModule,
     IonicModule.forRoot(OfflineApp),
-
-    CacheImgModule.forRoot(),
   ],
-  bootstrap: [ IonicApp ],
+  bootstrap: [IonicApp],
   entryComponents: [
     OfflineApp
   ],
   providers: [
     File,
     StatusBar,
     SplashScreen,
-    { provide: ErrorHandler, useClass: IonicErrorHandler }
+    {provide: ErrorHandler, useClass: IonicErrorHandler},
+    ImgCacheProvider
   ]
 })
-export class AppModule {}
+export class AppModule {
+}

src/components/components.module.ts

@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from "@angular/common"
+import {LazyImgComponent} from './lazy-img/lazy-img';
+import {DirectivesModule} from "../directives/directives.module";
+
+@NgModule({
+  declarations: [LazyImgComponent],
+  imports: [
+    DirectivesModule,
+    CommonModule],
+  exports: [LazyImgComponent]
+})
+export class ComponentsModule {
+}

src/components/lazy-img/lazy-img.html

@@ -0,0 +1,3 @@
+<div text-center [ngClass]="{ 'placeholder': placeholderActive }">
+    <img op-lazy-img [source]="source" (loaded)="placeholderActive = false"/>
+</div>

src/components/lazy-img/lazy-img.scss

@@ -0,0 +1,5 @@
+lazy-img {
+  op-lazy-img {
+    display: block;
+  }
+}

src/components/lazy-img/lazy-img.ts

@@ -0,0 +1,20 @@
+import {Component, Input} from '@angular/core';
+
+/**
+ * Generated class for the LazyImgComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'op-lazy-img',
+  templateUrl: 'lazy-img.html'
+})
+export class LazyImgComponent {
+
+  @Input()
+  public source: string;
+
+  public placeholderActive: boolean = true;
+
+}

src/directives/directives.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { LazyLoadDirective } from './lazy-load/lazy-load';
+@NgModule({
+	declarations: [LazyLoadDirective],
+	imports: [],
+	exports: [LazyLoadDirective]
+})
+export class DirectivesModule {}

src/global/img-cache/lazy-img.directive.ts → src/directives/lazy-load/lazy-load.ts

@@ -7,13 +7,13 @@ import {
   OnInit, OnDestroy, Renderer2
 } from '@angular/core';
 
-import { ImgCacheService } from './img-cache.service';
 
-import { Subscription } from 'rxjs/Subscription';
+import {Subscription} from 'rxjs/Subscription';
+import {ImgCacheProvider} from "../../providers/img-cache/img-cache";
 
 /**
-* This directive is charge of cache the images and emit a loaded event
-*/
+ * This directive is charge of cache the images and emit a loaded event
+ */
 @Directive({
   selector: '[op-lazy-img]'
 })
@@ -31,8 +31,9 @@ export class LazyLoadDirective implements OnInit, OnDestroy {
   private cacheSubscription: Subscription;
 
   constructor(public el: ElementRef,
-    public imgCacheService: ImgCacheService,
-    public renderer: Renderer2) { }
+              public imgCacheService: ImgCacheProvider,
+              public renderer: Renderer2) {
+  }
 
   public ngOnInit(): void {
     // get img element
@@ -50,10 +51,10 @@ export class LazyLoadDirective implements OnInit, OnDestroy {
     // cache img and set the src to the img
     this.cacheSubscription =
       this.imgCacheService
-          .cache(this.source)
-          .subscribe((value) => {
-            this.renderer.setAttribute(nativeElement, 'src', value);
-          }, (e) => console.log(e));
+        .cache(this.source)
+        .subscribe((value) => {
+          this.renderer.setAttribute(nativeElement, 'src', value);
+        }, (e) => console.log(e));
   }
 
   public ngOnDestroy(): void {

src/pages/contact/contact.module.ts

@@ -2,15 +2,13 @@ import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 
 import { ContactPage } from './contact';
-import { CacheImgModule } from '../../global';
 
 @NgModule({
   declarations: [ ContactPage ],
   imports: [
-    CacheImgModule,
-
     IonicPageModule.forChild(ContactPage),
   ],
-  exports: [ ContactPage ]
+  exports: [ ContactPage ],
+
 })
 export class ContactPageModule {}

src/pages/contact/contact.ts

@@ -1,15 +1,13 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController } from 'ionic-angular';
 
-import { ImgCacheService } from '../../global';
-
 @IonicPage()
 @Component({
   selector: 'page-contact',
   templateUrl: 'contact.html'
 })
 export class ContactPage {
 
-  constructor(public navCtrl: NavController, imgCacheService: ImgCacheService) { }
+  constructor(public navCtrl: NavController) { }
 
 }

src/pages/home/home.html

@@ -15,7 +15,7 @@
       <p>in code we trust</p>
     </ion-item>
 
-    <op-lazy-img [source]="'http://i.imgur.com/RgLjrEd.png'"></op-lazy-img>
+    <img op-lazy-img [source]="'http://i.imgur.com/RgLjrEd.png'" />
 
     <ion-card-content>
       <p>Images above have been cached. Try turning on the airplane mode and let Imgcache.js do the magic!</p>

src/pages/home/home.module.ts

@@ -1,20 +1,24 @@
-import { NgModule } from '@angular/core';
-import { IonicPageModule } from 'ionic-angular';
-import { HomePage } from './home';
+import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {IonicPageModule} from 'ionic-angular';
+import {HomePage} from './home';
 
-import { CacheImgModule } from '../../global';
+import {ComponentsModule} from "../../components/components.module";
+import {DirectivesModule} from "../../directives/directives.module";
 
 @NgModule({
   declarations: [
     HomePage,
   ],
   imports: [
-    CacheImgModule,
+    ComponentsModule,
+    DirectivesModule,
 
     IonicPageModule.forChild(HomePage),
   ],
   exports: [
     HomePage
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class HomePageModule {}
+export class HomePageModule {
+}

src/global/img-cache/img-cache.service.ts → src/providers/img-cache/img-cache.ts

@@ -1,21 +1,26 @@
-import { Injectable } from '@angular/core';
-import { File } from '@ionic-native/file';
-import { Platform } from 'ionic-angular';
+import {Injectable} from '@angular/core';
+
+import {File} from '@ionic-native/file';
+import {Platform} from 'ionic-angular';
 
 import ImgCache from '@chrisben/imgcache.js';
 
-import { ReplaySubject } from 'rxjs/ReplaySubject';
-import { map, take, flatMap, switchMapTo, tap } from 'rxjs/operators';
-import { Observable } from 'rxjs/Observable';
-import { bindCallback } from 'rxjs/observable/bindCallback';
+import {ReplaySubject} from 'rxjs/ReplaySubject';
+import {map, take, flatMap, switchMapTo, tap} from 'rxjs/operators';
+import {Observable} from 'rxjs/Observable';
+import {bindCallback} from 'rxjs/observable/bindCallback';
+
+import {normalizeUrlIos} from "../../global/utils/url.util";
 
-import { normalizeUrlIos } from '../utils';
+/*
+  Generated class for the ImgCacheProvider provider.
 
-/**
- * This service is charged of provide the methods to cache the images
- */
+  See https://angular.io/guide/dependency-injection for more info on providers
+  and Angular DI.
+*/
 @Injectable()
-export class ImgCacheService {
+export class ImgCacheProvider {
+
 
   private initNotifier$: ReplaySubject<string> = new ReplaySubject();