maxisam / ngx-progressive-image-loader

lazy load img/picture, prevent reflow and seo friendly.
MIT License
35 stars 6 forks source link

Universal issue #12

Open Ismaestro opened 5 years ago

Ismaestro commented 5 years ago

Hello again 😄!

I have this error while serving the app built with Angular Universal:

Error: StaticInjectorError(AppServerModule)[ProgressiveImageDirective -> InjectionToken WindowToken]: 
  StaticInjectorError(Platform: core)[ProgressiveImageDirective -> InjectionToken WindowToken]: 
    NullInjectorError: No provider for InjectionToken WindowToken!

any ideas?? I'm importing the last version in beta (7).

Ismaestro commented 5 years ago

Fixed with this:

  isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(this.platformId)) {
      this.isBrowser = true;
    }
  }
  <ng-container *ngIf="isBrowser">
    <ngx-progressive-image-loader
      [filter]="'blur(3px) drop-shadow(0 0 0.75rem crimson)'"
      [placeholderImageSrc]="hero.avatarBlurredUrl">
      <img (click)="seeHeroDetails(hero)" src="{{hero.avatarUrl}}" alt="" ngxProgressiveImage />
    </ngx-progressive-image-loader>
  </ng-container>

Maybe you should add some documentation on this or a demo... Finally working here :)

maxisam commented 5 years ago

I thought I had a demo? but thanks! This is still work in process. I will try to make it better and welcome to make a pull request.

maxisam commented 5 years ago

Could you try 4.0.0-beta.9? you don't need <ng-container *ngIf="isBrowser"> anymore in theory.

Ismaestro commented 5 years ago

Done, and yes, it's working as expected.

Thanks!!

maxisam commented 5 years ago

Thank you! Btw, I liked your project from long times ago. Thank you for creating that project.

maxisam commented 5 years ago

@Ismaestro also could you try 4.0.0-beta.12. I think it will help on things like some images are not loaded properly

Ismaestro commented 5 years ago

With that version while serving the app with ssr, I got this error:

> angular-example-app@7.0.0 serve:ssr /Users/iramos/WebstormProjects/angular7-example-app
> node dist/server

Node server listening on http://localhost:4000
/Users/iramos/WebstormProjects/angular7-example-app/dist/server.js:344
                        throw error;
                        ^

TypeError: Cannot read property 'src' of undefined
    at loadImage (/Users/iramos/WebstormProjects/angular7-example-app/dist/server.js:279342:27)
    at ProgressiveImageDirective.ngOnInit (/Users/iramos/WebstormProjects/angular7-example-app/dist/server.js:279694:13)
    at checkAndUpdateDirectiveInline (/Users/iramos/WebstormProjects/angular7-example-app/dist/server.js:26202:19)
    at checkAndUpdateNodeInline (/Users/iramos/WebstormProjects/angular7-example-app/dist/server.js:27466:20)
    at checkAndUpdateNode (/Users/iramos/WebstormProjects/angular7-example-app/dist/server.js:27428:16)

Serving the app with JIT goes fine.

:)

maxisam commented 5 years ago

Weird. That doesn't make any sense. There are only 2 changes between 9 and 12, https://github.com/maxisam/ngx-progressive-image-loader/pull/11/commits/819dae7afbf8ce1963e3a054685d68e2c3116776 and https://github.com/maxisam/ngx-progressive-image-loader/pull/11/commits/717c266cd5e1815e1a037dcf9f0f2d302b0af459 I don't understand how could it work on 9 but not 12

Ismaestro commented 5 years ago

Yup so weird. You can reproduce the error just clone my project, upgrade the version, npm run build:ssr and npm run serve:ssr. You will see the error...

maxisam commented 5 years ago

I will try it sometime this week.

rassrig commented 4 years ago

I've also encountered an error while running with universal app

export '_window' (imported as 'i11') was not found in 'ngx-window-token'

"ngx-progressive-image-loader": "^3.0.2", "ngx-window-token": "^2.0.1", "tslib": "^1.10.0

Tried to recreate this with just angular and works fine. Let me know if I missed something

maxisam commented 4 years ago

please try the latest beta version. 4.0.0-beta.15. I used it on production for a while already.