relative NooB having issues getting this installed

[TomkinsG]

I am a relative noob here in the MEAN space - my knowledge is building around this architecture but there are still gaps - a few dots to join yet! Thank you for your patience!

I have node, express on the server end and a restful API developed. I have an angular SPA on the client end that is served to the user's browser to run. The app is coming together nicely and it's time to add lazy image loading. My understanding is that this is running in the browser and not in the server end of things and what i am doing doesn't seem to make sense to me as its working on the server end. I could use some more detailed installation instructions.

Here is what i have done in sequence:

A. I ran npm install angular-lazy-image and it installed OK. It's in my package.json file.

(note i think this satisfies the first part of the install steps #1 only and not the "and set this script as a dependency" piece)

B. per step 2, I added the afkl.lazyImage to my dependencies for my angular module: angular.module("myApp", ["ngRoute","ngSanitize","afkl.lazyImage"]);

C. Node restarted. so far so good.

D. load the page in the browser and I get Uncaught Error: [$injector:modulerr] caused by the addition of the afkl.lazyImage

E. So I am thinking that I have not got the 2nd part of the 1st installation step in place: "and set this script as a dependency" is missing.

Here is where i go off the rails i think. I don't know how I am supposed to do that for certain. My first thinking is to add it to my main node app, app.js:

var imageLazyLoader = require('angular-lazy-image');

but then it complains:

angular.module('afkl.lazyImage', []);
^

ReferenceError: angular is not defined 

and node crashes.

So i add angular to node through NPM and then added: var angular = require('angular');

And I get a similar error that Window is not defined.

this is where i stopped as it doesn't feel right, I think i am going in the wrong direction here - this all seems to be server focused.

thanks for the help

thanks GT

[maapteh]

Hi GT, its an old Angular 1 module and indeed for the client side only. Since it relies on the browser (window) scroll position :) So inside your Node application it will never ever work. Its an npm dependency for the frontend which is on the client side only.

[TomkinsG]

If its old - are there more modern alternatives? if not, how do i get it going in the front end? ie fix the Uncaught Error: [$injector:modulerr]

thanks GT

[maapteh]

Which Angular version is your app running on?

You can look at the sample page code overhere: https://github.com/afklm/ng-lazy-image/blob/master/sample/index.html

From your text i understand that you didn't include the library of this component itself. You need to add that of course too.

<script src="lib/angular.min.js"></script>
<!-- our ng lazy image module -->
<script src="lazy-image.js"></script>
<!-- other third party deps -->

<!-- dummy app kickstarting our module -->
<script src="js/app.js"></script>

But if you just starting with Angular i would advice you to start looking at Angular latest (5) and forget that whole Angular 1.