Question

我正在尝试使用Angular在Web和移动设备之间使用Nativescript代码共享并且我安装了最新的稳定版本等。但是，当我开始使用npm的许多模块时，例如：“ nativescript-localstorage”，它会为我提供： “无法解析'tns-core-modules / file-system / file-system-access'” 即使在模块作者在更新其模块等几个小时后对其进行测试之后。但对我来说，它不起作用

Answer 1

我有同样的问题。因此，我提供了一个服务，该服务是本机localStorage的包装。

此后，我将包装器注入到Web应用程序模块和移动应用程序模块中。但是对于移动应用程序模块，我注入了nativescript-localstorage而不是包装器。

就像我的包装器具有与nativescript-localstorage类一样的功能，Angular只看到火了，我可以使用我的包装器来处理移动设备和Web中的localStorage！

实际上，当在Web上下文中时，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();
    }

}

希望这会有所帮助。

Answer 2

您可以使用依赖项注入功能在模块中提供适当的存储实现：

app.module.ts（网络）：

ubuntu server 18.04

app.module.tns.ts（移动）：

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

使用上述设置，您可以在服务和组件中注入import * as mobileLocalStorage from 'nativescript-localstorage'; providers: [ { provide: Storage, useValue: mobileLocalStorage } ]，Angular将在运行时提供正确的实现。

Storage

Answer 3

您可以使用nativescript-localstorage，但请记住，这是一个可在移动环境（iOS和Android）而不是Web项目中使用的插件。也就是说，当您创建代码共享项目（在Web和NativeScript之间）时，您应该创建仅在NativeScript文件中使用插件的逻辑。

例如，创建名称以.tns结尾的文件，并在其中添加插件的逻辑。

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

展示上述内容并使用nativescript-localstorage的完整POC应用可以在here中找到。在移动设备/模拟器上测试项目

tns run android --bundle

使用Angular Web项目运行进行测试

ng serve -o

Answer 4

Neau Adrien的答案对我确实有用，不要忘记仍然在模块.tns.ts文件中导入CustomStorageService

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

无法在代码共享项目中使用Nativescript Localstorage插件

4 个答案: