Angular 17无app.module场景下如何使用ngx-webstorage？

1. 如何在当前场景下使用ngx-webstorage #

你遇到的NullInjectorError是因为缺少LOCAL_STORAGE和SESSION_STORAGE令牌的提供者，在Angular 17的独立架构（无AppModule）下，可通过以下两种方式配置：

方式一：用importProvidersFrom导入NgModule配置 #

ngx-webstorage暂未完全适配独立组件API，可通过importProvidersFrom将原NgModule的配置导入到应用提供者数组中。修改main.ts的bootstrap配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { importProvidersFrom } from '@angular/core';
import { WebstorageModule } from '@ngx-webstorage/core';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(WebstorageModule.forRoot({
      prefix: 'your-app-prefix', // 可选：设置存储键前缀
      separator: '.', // 可选：键的分隔符
      caseSensitive: true // 可选：是否区分大小写
    }))
  ]
});

该方式会复用ngx-webstorage原有逻辑，自动注册LOCAL_STORAGE和SESSION_STORAGE依赖。

方式二：手动注册依赖提供者 #

若上述方式不生效，可直接手动提供令牌对应实例：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { LOCAL_STORAGE, SESSION_STORAGE, BrowserStorageService } from '@ngx-webstorage/core';

bootstrapApplication(AppComponent, {
  providers: [
    { 
      provide: LOCAL_STORAGE, 
      useFactory: () => new BrowserStorageService(window.localStorage) 
    },
    { 
      provide: SESSION_STORAGE, 
      useFactory: () => new BrowserStorageService(window.sessionStorage) 
    }
  ]
});

配置完成后，你的StateStorageService即可正常注入依赖。

2. 替代方案：使用原生Web Storage API #

如果不想依赖第三方库，可直接封装浏览器原生的localStorage和sessionStorage实现相同功能：

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

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

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

  // 扩展认证令牌操作方法
  storeAuthToken(token: string): void {
    localStorage.setItem(this.authenticationKey, token);
  }

  getAuthToken(): string | null {
    return localStorage.getItem(this.authenticationKey);
  }

  clearAuthToken(): void {
    localStorage.removeItem(this.authenticationKey);
  }
}

该方案无需额外配置，轻量且原生兼容，完全满足状态存储需求。

内容的提问来源于stack exchange，提问作者dharam