Fieel
April 9, 2018, 12:30pm
#1
Hello,
i’ve been following some Ionic classes at school lately. We never used .module.ts files with our page, just app.module.ts, so when the command ionic generate page started creating .module.ts files i freaked out, googled and found out i could avoid this using the --no-module parameter.
Well, turns out, those modules are quite useful. I wanted to add an image caching plugin (see https://www.npmjs.com/package/ionic-image-loader ) and this plugin requires specifically this:
Then add IonicImageLoader in your child/shared module(s)
which of course i’m lacking. I have no idea how to even install this plugin now. What can i possibly do?
I’m using Ionic 3.20.0
Fieel
April 9, 2018, 12:56pm
#2
cli packages: (C:\Users\Fil\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.8
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.9.4
npm : 5.6.0
OS : Windows 10
Environment Variables:
ANDROID_HOME : C:\android_sdk
Misc:
backend : pro
I don’t believe the plugin requires child/shared modules, it just provides that step for those who use them.
With this in mind, I believe all you need is that initial import in app.module.ts
If you want to add lazy loading though, you’ll have to manually create the .module.ts files.
1 Like
Fieel
April 9, 2018, 4:13pm
#4
The plugin doesn’t seem to work without so i figured it’s a must
imported in app.module.ts:
import { IonicImageLoader } from 'ionic-image-loader';
...
imports: [
...,
IonicImageLoader.forRoot()
No errors and such. Then i simply use it in whatever page i want, like this:
<img-loader src="http://marrowproductions.com/WoF/wiki/images/a/a9/Example.jpg"></img-loader>
but it’s not rendering at all, if i inspect i find this newly edited tag:
<img-loader src="http://marrowproductions.com/WoF/wiki/images/a/a9/Example.jpg" _nghost-c0="" ng-reflect-src="http://marrowproductions.com/W" style="display: block; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; background-image: url("http://marrowproductions.com/WoF/wiki/images/a/a9/Example.jpg");">
<!--bindings={ "ng-reflect-ng-if": "false"}-->
</img-loader>
It’s working, i’m so noob i didn’t even realize it was working. My markup was bad so the image wasn’t rendering properly. Here’s my new html markup:
<div *ngIf="data.media_type == 'image'" (click)="showFullScreenImage(data.hdurl)" class="stile-immagine">
<img-loader src="{{ data.url }}" useImg></img-loader>
</div>
<img-loader>
without the useImg proprety wouldn’t render at all.