Невозможно использовать плагин Nativescript Localstorage в проекте с общим кодом

Я была такая же проблема. Итак, я создал сервис, который является оберткой собственного localStorage.

После этого я вставляю свою оболочку в модуль своего веб-приложения и модуль мобильного приложения. Но для модуля мобильного приложения я ввожу nativescript-localstorage вместо своей оболочки.

Подобно тому, как моя оболочка имеет те же функции, что и класс nativescript-localstorage, Angular видит только огонь, и я могу использовать свою оболочку для работы с localStorage на мобильных устройствах и в Интернете!

На самом деле, когда он находится в веб-контексте, Angular использует «родной» localStorage, а когда он находится в мобильном контексте, Angular использует библиотеку nativescript-localstorage.

Ниже моего кода.

Моя служебная оболочка:

import { Injectable } from "@angular/core";

@Injectable()
export  class CustomStorageService {    
    setItem(key, value){
        localStorage.setItem(key, value);
    }

    getItem(key){
        return localStorage.getItem(key);
    }

    removeItem(key){
        localStorage.removeItem(key);
    }

    clear(){
        localStorage.clear();
    }
}

В app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { CustomStorageService } from './commons/core/services/guard/custom-storage.service';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    CustomStorageService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Мой app.module.tns.ts:

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
import * as mobileStorage from 'nativescript-localstorage';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    NativeScriptModule,
    AppRoutingModule,
    NativeScriptHttpClientModule,
    NativeScriptFormsModule
  ],
  providers: [
    {
      provide: CustomStorageService,
      useValue: mobileStorage 
    }
  ],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})

export class AppModule { }

Пример использования обертки:

import { Injectable } from '@angular/core';
import { CustomStorageService } from './custom-storage.service';

@Injectable()
export  class TokenService {
    constructor(private storage: CustomStorageService){

    }

    getToken(): String {
        return this.storage.getItem('token');
    }

    saveToken(token: String) {
        this.storage.setItem('token',token);
    }

    destroyToken() {
        this.storage.removeItem('token');
    }

    destroyAll(){
        this.storage.removeItem('token');
        this.storage.removeItem('user_id');
        this.storage.removeItem('user_name');
        this.storage.removeItem('full_name');
    }

    destroyUser() {
        this.storage.removeItem( 'currentUser' );
    }

    cleanLocalStorage() {
        this.storage.clear();
    }

}

Надеюсь, это поможет.

Вы можете использовать nativescript-localstorage, но имейте в виду, что это плагин, который будет работать в мобильной среде (iOS и Android), а не в веб-проекте. Тем не менее, когда вы создаете проект с совместным использованием кода (между Web и NativeScript), вы должны создать логику, которая использует плагин только в файлах NativeScript.

Например, создайте файлы, имена которых оканчиваются на .tns, и разместите там логику для плагина.

home.component.ts // web file
home.component.tns.ts // NativeScript file

Полное приложение POC, демонстрирующее вышеуказанное и использующее nativescript-localstorage, можно найти здесь. Чтобы протестировать проект на мобильном устройстве / эмуляторе, запустите

tns run android --bundle

для тестирования с помощью веб-проекта Angular запустить

ng serve -o

Ответ от Neau Adrien действительно сработал для меня, не забудьте по-прежнему импортировать CustomStorageService в свой файл module.tns.ts

import { CustomStorageService } from './services/customstorage.service'

Вы можете использовать функцию внедрения зависимостей, чтобы обеспечить соответствующую реализацию хранилища в ваших модулях:

app.module.ts (Интернет):

providers: [    
    {
      provide: Storage,
      useValue: localStorage
    }
  ]

app.module.tns.ts (мобильный):

  import * as mobileLocalStorage from 'nativescript-localstorage';

  providers: [    
        {
          provide: Storage,
          useValue: mobileLocalStorage
        }
      ]

С помощью вышеуказанной настройки вы можете внедрить Storage в свои службы и компоненты, и Angular предоставит правильную реализацию во время выполнения.

export class AuthenticationService {

    constructor(private localStorage: Storage) {
    }
}