v4.0.0 HttpInterceptor implementation breaks project behavior

[eliashdezr]

Updated info is this comment: #237 (comment)

--
This may no longer be relevant

Angular CLI: 7.1.0-rc.0
Node: 10.11.0
OS: win32 x64
Angular: 7.1.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.0-rc.0
@angular-devkit/build-angular     0.11.0-rc.0
@angular-devkit/build-optimizer   0.11.0-rc.0
@angular-devkit/build-webpack     0.11.0-rc.0
@angular-devkit/core              7.1.0-rc.0
@angular-devkit/schematics        7.1.0-rc.0
@angular/cli                      7.1.0-rc.0
@ngtools/webpack                  7.1.0-rc.0
@schematics/angular               7.1.0-rc.0
@schematics/update                0.11.0-rc.0
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

I recently updated from v3.x and I noticed that I couldn't make second calls to any existing rxjs subscription object that I have already initialized, this could be from calling an API to using the reactive forms object, etc. they all go as undefined variables.

I thought it was something related with Angular v7.1.0 but after commenting anything related with ngx-gallery, everything started working as expected. Is there a drastic change in v4 that destroy any kind of rxjs subscription?

[MurhafSousli]

@eliashdezr The gallery works properly in the demo

I couldn't make second calls to any existing rxjs subscription object that I have already initialized

What do you mean? can you add a reproduction?

[eliashdezr]

Tried to reproduce it on the template but I couldn't make it. I had to revert to 3.3.1 and everything is working just fine. Is there something that is changing the changedetection behavior? Or setting any rxjs configuration on the fly?

Btw, this happens by just importing any of the 3 modules GalleryModule, GallerizeModule, LightboxModule in the app.module.ts. Doesn't matter if I don't implement or call any function from those modules.

I'll try to see to reduce my project as much as possible to see if I can reproduce it.

[MurhafSousli]

@eliashdezr I cannot predict what is happening, if you cannot reproduce it then it is an issue with your project, maybe a fresh npm install would fix it

[eliashdezr]

@eliashdezr I cannot predict what is happening, if you cannot reproduce it then it is an issue with your project, maybe a fresh npm install would fix it

@MurhafSousli

Here's a reproduction captured into a GIF file:

1. ngOnInit calls this.userService.getUsers().subscribe()... and receives a list of users
2. users are loaded into a mat-table
3. the table has a column with a button to edit the user info, that button opens a mat-dialog which loads a reactive form with FormGroup
4. make some changes, then call the this.userService.update(user).subscribe()...
5. mat-dialog is closed and fires the this.userService.getUsers().subscribe()... to update the table with the latest information. Does not work, there's no call to the API and returns the previous result from the step 1, like if the data was cached but I don't use any caching strategy
6. Without refreshing the window, I try to open the mat-dialog again from the button on step 3, the FormGroup cannot be initialized again and is set to undefined and throws an error while it tries to load the user data because the patchValue function doesn't exists.
7. If I refresh the window I can get the last information again and edit again, but just ONE TIME, after that, everything starts behaving the same.

As you can see, there's no implementation of ngx-gallery on that component, I'm just importing it to the app.module.ts

This is my package.json:

  "dependencies": {
    "@angular/animations": "^7.1.0",
    "@angular/cdk": "^7.1.0",
    "@angular/common": "^7.1.0",
    "@angular/compiler": "^7.1.0",
    "@angular/core": "^7.1.0",
    "@angular/forms": "^7.1.0",
    "@angular/http": "^7.1.0",
    "@angular/material": "^7.1.0",
    "@angular/platform-browser": "^7.1.0",
    "@angular/platform-browser-dynamic": "^7.1.0",
    "@angular/router": "^7.1.0",
    "@ngx-gallery/core": "^4.0.0-beta.1",
    "@ngx-gallery/gallerize": "^4.0.0-beta.1",
    "@ngx-gallery/lightbox": "^4.0.0-beta.1",
    "compressorjs": "^1.0.1",
    "core-js": "^2.5.7",
    "date-fns": "^1.29.0",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.11",
    "rxjs": "^6.3.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.11.0-beta.0",
    "@angular/cli": "^v7.1.0-rc.0",
    "@angular/compiler-cli": "^7.1.0",
    "@angular/language-service": "^7.1.0",
    "@types/lodash": "^4.14.118",
    "@types/node": "~10.12.8",
    "codelyzer": "~4.5.0",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6",
    "webpack-bundle-analyzer": "^3.0.3"
  }

This is how I import the modules:

import { GalleryModule } from '@ngx-gallery/core'
import { GallerizeModule } from '@ngx-gallery/gallerize'
import { LightboxModule } from '@ngx-gallery/lightbox'
...
  imports: [
    GallerizeModule,
    GalleryModule,
    LightboxModule,
  ],

Already cleaned my npm cache, removed package-lock.json and reinstall everything. Getting the same behavior. But if I unload all the ngx-gallery 3 modules or if I go back to the 3.3.1 version, everything goes to normal.

[MurhafSousli]

@eliashdezr Can't help you without reproduction, reproduce it here with version 4.0.0 https://stackblitz.com/edit/ngx-gallery

[eliashdezr]

@MurhafSousli

I'm starting to believe that this is what is causing my issues:
15c3e88#diff-a6acef5b54e76c5dc350ad734f65591a

On 4.x I also started to get issues with my interceptor, because when I fetch an image, I use the in browser fetch operations, not with the Http module. Now all my images calls are getting thru there and so firing my HttpInterceptor and yours.

The issue with your implementation is that you are caching everything across the entire application, giving me the unexpected behaviors I just described above. Now it makes sense that I get undefined calls. Is this something that can be reversed or at least disabled?

[MurhafSousli]

Should be fixed in v4.0.1, can you confirm that?

[eliashdezr]

@MurhafSousli confirmed fixed on 4.0.1. Can this be enabled on demand?