Angular6 - ng build / serve --prod - Error during template compile of 'AppModule'

[kararade]

I have this problem when I'm building or seving an Angular6 application for PROD with ng serve --prod or ng build --prod

ERROR in app/app.module.ts(84,47): Error during template compile of 'AppModule'
  Complex function calls are not supported. in 'intersectionObserverPreset'
    'intersectionObserverPreset' references 'intersectionObserverPreset'
      'intersectionObserverPreset' references 'intersectionObserverPreset'
        'intersectionObserverPreset' contains the error.

This is what I have in the line app/app.module.ts(84,47)

import { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';
@NgModule({
    imports: [
             ...,
/*84 -->*/ LazyLoadImageModule.forRoot({ preset: intersectionObserverPreset }) /*<-- 84*/
    ],
    declarations:  [...],
    entryComponents [...],
    providers: [...],
    bootstrap: [...]
})

Versions:

angular: 6.1.0
ng-lazyload-image: 5.0.0
npm: 5.6.0
node: 8.11.4
typescript: 2.7.2

It seems to have something to do with AOT but I can't find a way to fix it. This error does not occur when normally running the commands ng build or ng serve

I appreciate any help

Thanks!

[kahnchen1028]

I have the same problem,plz help

[yah0130]

in ionic4 angular7,build with --prod ,only show the default image,it is ok when build without --prod

[tjoskar]

Is it working if you don't use intersectionObserverPreset?

imports: [
  LazyLoadImageModule
],

[kararade]

Hey @tjoskar

I had already tried to use the LazyLoadImageModule without the intersectionObserverPreset previously as you mention, but interestingly without it, the error is reproduced to me in all environments, dev and prod. To give you a little more context, these images are loaded inside a carousel-modal, I'm not sure if there's any conflict with that, but it doesn't seem.

Please, see below.

1. Setting up the module without the intersectionObserverPreset

imports: [
  LazyLoadImageModule
],

• Doesn't work for the following commands: ng serve, ng serve --prod, ng build and ng build --prod

---

2. Setting up the module including the intersectionObserverPreset

imports: [
    LazyLoadImageModule.forRoot({ preset: intersectionObserverPreset })
],

• Doesn't work for the following commands: ng serve --prod and ng build --prod

It's giving me this error

ERROR in app/app.module.ts(84,47): Error during template compile of 'AppModule'
  Complex function calls are not supported. in 'intersectionObserverPreset'
    'intersectionObserverPreset' references 'intersectionObserverPreset'
      'intersectionObserverPreset' references 'intersectionObserverPreset'
        'intersectionObserverPreset' contains the error.

• Works correctly for the following commands: ng serve and ng build

---

Maybe it's something I'm not understanding well in relation to the use of intersectionObserverPreset. Any help will be appreciated.

Thank you!

[kahnchen1028]

Hello @tjoskar

ng-lazyload-img component loads image by scroll trigger what is a default behavior, I got a the situation what the users don't need any scrolling to view carousel banner and when the users click privious/next button in component,they will get an blank image, so I need include intersectionObserverPreset to solve this issue, but it can't work for ng serve, ng serve --prod, ng build and ng build --prod..

please help to fixed it thank you :)

[tjoskar]

Hi @kararade, if you don't use intersectionObserverPreset; ng-lazyload-image will trigger an image load on scroll but since you are using an image-carousel the user won't scroll and you need to trigger an event on "image-slide" (something like this: https://github.com/tjoskar/ng-lazyload-image/issues/197#issuecomment-327004001) or using intersectionObserverPreset, which is the recommended way. However, as you notice, AOT won't work for some reason when using intersectionObserverPreset and I'm not sure why. I will try to take a look at it.

[tjoskar]

@kahnchen1028, what version of Angular are you using?

@kararade, I created a Angular 7 app and installed ng-lazyload-image with intersectionObserverPreset and it seems to work fine with both ng serve --prod and ng build --prod. I can try to downgrade Angular to version 6 (which active license has ended for) but is there any chance that you will upgrade to version 7 any time soon?

[kararade]

@tjoskar let me check what happens upgrading to the version 7. I will let you know! Thanks

[johnqiuwan]

I have the exactly same issue, and I am using angular version 7. It wokrs on 'ng serve' but not 'ng build --prod --aot'

is there any solution for the issue?

[tjoskar]

@johnqiuwan, can you create a small repo where you reproduce the issue? I just created this one and I can't reproduce it: https://github.com/tjoskar/ng-lazyload-image-bugs/tree/master/368-compile-error

I did the following:

$ ng new my-app
$ npm install ng-lazyload-image --save

Did the following code changes: https://github.com/tjoskar/ng-lazyload-image-bugs/commit/b0bb6e7edc9dcd3fc60d091b13f8d929dd865a85

And run ng build --prod --aot

[bryantlikes]

I created a pull request that recreates the issue. I was able to fix it in my project by moving the import with the forRoot out of the child module and into the main app module. Now it works fine for me and I don't see this issue anymore.

[tjoskar]

@bryantlikes, I just tried it out and I don't get the error. For you that it doesn't work for; what version of angular-cli do you have? (ng --version)

[linjie997]

Angular CLI: 7.3.5 Node: 10.14.1 OS: win32 x64 Angular: 7.2.8

rxjs 6.4.0 typescript 3.2.4 webpack 4.28.4

[Gromov-Roman]

@tjoskar Good day, in my behavior i have no error, just some images not loaded in AOT compilation, same as not using intersectionObserverPreset. All images load after scrolling

LoadImageModule.forRoot({
    preset: intersectionObserverPreset
})

<img title="{{card.picture.title || card.title}}"
                 alt="{{card.picture.title || card.title}}"
                 class="lazy"
                 [defaultImage]="'assets/images/default-img.png'"
                 [lazyLoad]="card.picture.renders[emblem] | retina">

Angular CLI: 7.3.2 Angular: 7.2.4

[Gromov-Roman]

@tjoskar Ou, updated to 5.1.1 and seemingly bug is gone)

[tjoskar]

@Gromov-Roman, interesting. @linjie997, is it possible for you to upgrade as well? (npm install ng-lazyload-image@5.1.1)

[linjie997]

Hi, I can confirm that updating solves the issue

[tjoskar]

ng-lazyload-image@5.1.2 is now out. Let me know if the error still occur.

[maxakash]

Updating to ng-lazyload-image@5.1.2 and angular 7 solved the issue. Thanks for resolving .