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

Question

Я пытаюсь использовать общий доступ к коду Nativescript для Интернета и мобильных устройств с помощью Angular. и я установил последнюю стабильную версию и т.д .. Но многие npm-модули, например, например: «nativescript-localstorage», когда я начинаю его использовать, дают мне: "Не удается разрешить 'tns-core-modules / file-system / file-system-access'" даже после того, как автор модуля протестировал его через несколько часов после обновления своего модуля и т. д. но для меня это не работает

Answer 1

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

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

Answer 2

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

app.module.ts (web):

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

app.module.tns.ts (mobile):

  import * as mobileLocalStorage from 'nativescript-localstorage';

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

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

export class AuthenticationService {

    constructor(private localStorage: Storage) {
    }
}

Answer 3

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

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

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

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

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

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

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 { }

My 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();
    }

}

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

Answer 4

Вы можете использовать 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 Web проекта

ng serve -o