Angular 11 - Cannot read property 'key' of undefined

[ericreboisson]

I'm submitting a ... (check one with "x")

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Support request => <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request

Current behavior

The Angular application compile fine by using ng serve but I've got this error in the browser console when I browse http://localhost:4200

TypeError: Cannot read property 'key' of undefined
at BrowserCacheModule.getCacheValue (ngx-cache-platform-browser.js:24)
at new BrowserCacheModule (ngx-cache-platform-browser.js:14)
at Object.factory (core.js:11385)
at R3Injector.hydrate (core.js:11438)
at R3Injector.get (core.js:11258)
at core.js:11295
at Set.forEach ()
at R3Injector._resolveInjectorDefTypes (core.js:11295)
at new NgModuleRef$1 (core.js:25292)
at NgModuleFactory$1.create (core.js:25346)

Expected/desired behavior

I must be able to browse the application without error

Minimal reproduction of the problem with instructions

create an Angular application with angular cli, add ngx-cache/core and platform-browser :
ng new my-first-project
npm install @ngx-cache/core --save
npm install @ngx-cache/platform-browser --save

configure app.module.ts like this :

import { NgModule, PLATFORM_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CACHE, CacheLoader, CacheStaticLoader } from '@ngx-cache/core';
import { CacheModule } from '@ngx-cache/core';
import { BrowserCacheModule, MemoryCacheService } from '@ngx-cache/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


export function cacheFactory(): CacheLoader {
  return new CacheStaticLoader({
    key: 'NGX_CACHE',
    lifeSpan: {
      TTL:  86400
    }
  });
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CacheModule.forRoot({
      provide: CacheLoader,
      useFactory: (cacheFactory)
    }),
    BrowserCacheModule.forRoot([
      {
        provide: CACHE,
        useClass: MemoryCacheService // or, LocalStorageCacheService
        , deps: [PLATFORM_ID]
        
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng serve
browse http://localhost:4200

What is the motivation / use case for changing the behavior?

I first met this bug in my company, trying to upgrade the Angular versions from 10 to 11. I isolated the issue with a simple Angular cli project as explain before.

Environment

• Angular version: ~11.2.10

• Browser:

• [x ] Chrome (desktop) version Version 88.0.4324.150 (Official Build) (x86_64)
• Chrome (Android) version XX
• Chrome (iOS) version XX
• Firefox version XX
• Safari (desktop) version XX
• Safari (iOS) version XX
• IE version XX
• Edge version XX

[zhuweid]

same here

[fulls1z3]

see #141