Using ngx-webstorage with Angular 17

Question

I started working with Angular 17. As per recommendation, I went with a no app.module. Now, I am trying to use ngx-webstorage and for a StateStorageService

I used this in earlier version of angular and added this as a provider to the app.module. However, now I don't know how I can use this as a provider. Below is a sample code

@Injectable({ providedIn: 'root' })
export class StateStorageService {
  private previousUrlKey = 'previousUrl';
  private authenticationKey = 'jhi-authenticationToken';

  constructor(@Inject(LOCAL_STORAGE) private $localStorage: LocalStorageService, @Inject(SESSION_STORAGE) private $sessionStorage: SessionStorageService) {
  }

  storeUrl(url: string): void {
    this.$sessionStorage.store(this.previousUrlKey, JSON.stringify(url));
  }

  getUrl(): string | null {
    const previousUrl = this.$sessionStorage.retrieve(this.previousUrlKey);
    return previousUrl ? (JSON.parse(previousUrl) as string | null) : previousUrl;
  }
}

and the error is as below

core.mjs:11752 ERROR NullInjectorError: NullInjectorError: No provider for InjectionToken window_local_storage!
    at NullInjector.get (core.mjs:5606:27)
    at R3Injector.get (core.mjs:6049:33)
    at R3Injector.get (core.mjs:6049:33)
    at injectInjectorOnly (core.mjs:911:40)
    at Module.ɵɵinject (core.mjs:917:42)
    at Object.StateStorageService_Factory [as factory] (state-storage.service.ts:6:33)
    at core.mjs:6169:43
    at runInInjectorProfilerContext (core.mjs:867:9)
    at R3Injector.hydrate (core.mjs:6168:17)
    at R3Injector.get (core.mjs:6038:33)

My question:

• Is there a way to do use ngx.webstorage?
• If not, is there an alternate solution ?

Thank you very much in advance for looking into it :)

Answer 1

Your issues are likely for one or both of the following reasons:

• You haven't provided the services provided by NgxWebstorageModule.
• You are mixing the native storage providers with the storage services.

Providing the module

For Angular applications using bootstrapApplication, you must use importProvidersFrom to provide the services from a module in the providers array.

await bootstrapApplication(RootComponent, {
  providers: [
    importProvidersFrom(NgxWebstorageModule.forRoot({ /* your config goes here */})
  ]
});

Native Providers vs Storage Services

The LOCAL_STORAGE token provides the underlying storage implementation used in a storage service such as LocalStorageService. You shouldn't use the injection tokens as they inject instances of WebStorage, not the storage services you want.

Answer 2

You can make it work along the below lines as well. I've created a sample repo with working code for demo. Feel free to clone and customize as per your needs.

app.component.html

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {
  LOCAL_STORAGE,
  NgxWebstorageModule,
  SESSION_STORAGE,
} from 'ngx-webstorage';
import { StateStorageService } from './state-storage.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  providers: [
    NgxWebstorageModule,
    StateStorageService,
    { provide: LOCAL_STORAGE, useFactory: () => localStorage },
    { provide: SESSION_STORAGE, useFactory: () => sessionStorage },
  ],
})
export class AppComponent {
  title = 'test_17_0_7';
  constructor(private stateStorageService: StateStorageService) {}
}

state-storage.service.ts

import { Inject, Injectable } from '@angular/core';
import {
  LOCAL_STORAGE,
  LocalStorageService,
  SESSION_STORAGE,
  SessionStorageService,
} from 'ngx-webstorage';

@Injectable({
  providedIn: 'root',
})
export class StateStorageService {
  private previousUrlKey = 'previousUrl';
  private authenticationKey = 'jhi-authenticationToken';

  constructor(
    @Inject(LOCAL_STORAGE) private $localStorage: LocalStorageService,
    @Inject(SESSION_STORAGE) private $sessionStorage: SessionStorageService
  ) {
    console.log('StateStorageService constructor');
  }

  storeUrl(url: string): void {
    this.$sessionStorage.store(this.previousUrlKey, JSON.stringify(url));
  }

  getUrl(): string | null {
    const previousUrl = this.$sessionStorage.retrieve(this.previousUrlKey);
    return previousUrl
      ? (JSON.parse(previousUrl) as string | null)
      : previousUrl;
  }
}