cannot retrieve data from LocalStorageService

[Tokenizers]

Hello,

I encountered a small problem, and i don't know what i'm doing wrong, could you help me please ?

Versions

• NgxWebstorage: 6.0.0
• Angular: 10.2.4

Describe the bug When i want to use the LocalStorageService, then the service has the strategy attribute to undefined.

To Reproduce Steps to reproduce the behavior:

1. Add the library

"ngx-webstorage": "6.0.0"

2. Configure app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule, APP_BASE_HREF, registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './guards';
import { JwtHelperService } from './helpers';
import { TokenStorageService } from './services';

import { NgxSmartModalModule } from 'ngx-smart-modal';
import { NgxWebstorageModule } from 'ngx-webstorage';
import { AngularMyDatePickerModule } from 'angular-mydatepicker';

registerLocaleData(localeFr, 'fr');

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    HttpClientModule,

    NgxSmartModalModule.forRoot(),
    AngularMyDatePickerModule,
    NgxWebstorageModule.forRoot({
      prefix: 'my-project',
      separator: '.',
      caseSensitive: true
    }),
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'},
    AuthGuard,
    TokenStorageService,
    JwtHelperService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

3. inject the service in my http interceptor Service

...
import * as _ from 'lodash';
import * as moment from 'moment';
import { LocalStorageService } from 'ngx-webstorage';

@Injectable()
export class AppInterceptorService implements HttpInterceptor {

  constructor(private router: Router, private tokenStorageService: TokenStorageService,
    private localStorageService: LocalStorageService) { }
...

and do a retrieve

4. See error

TypeError: Cannot read property 'get' of undefined at LocalStorageService.retrieve (ngx-webstorage.js:74) at AppInterceptorService.buildHeaders (app-interceptor.service.ts:61) at AppInterceptorService.intercept (app-interceptor.service.ts:29) at HttpInterceptorHandler.handle (http.js:1258) at HttpXsrfInterceptor.intercept (http.js:1886) at HttpInterceptorHandler.handle (http.js:1258) at HttpInterceptingHandler.handle (http.js:1936) at MergeMapSubscriber.project (http.js:1082) at MergeMapSubscriber._tryNext (mergeMap.js:44) at MergeMapSubscriber._next (mergeMap.js:34)

Additional context i migrated from angular 7 to 10 i moved ngx-webstore from v2 to newer version (v6) i also tried to upgrade to angular 11 and use ngx-webstore v7.1 but the bug still occurs.

Thanks in advance

[PillowPillow]

Hello, it seems that you didn't declare the interceptor in your module. So it can't retrieve the reference to LocalStorageService since is doesn't belong to any module's Injection container.

You have to add to your module's provider section something like that.

...
  providers: [
      {provide: HTTP_INTERCEPTORS, useClass: AppInterceptorService , multi: true}
      ...
  },
...