Use Native Storage in service

Ionic Native
1

I installed Native Storage. So I have to use it on home.ts (component). this is my Code

  setStyle (val: string) {
    this.nativeStorage.setItem('style', {color: val})
    .then(
      () => console.log('Stored item!'),
      error => console.error('Error storing item', error)
    );
  }

  getStyle (property: string) {
    this.nativeStorage.getItem('style')
    .then(
      data => console.log(data[property]),
      error => console.error(error)
    );
  }

  ngOnInit() {
    this.setStyle('fff');
    this.getStyle('color');
  }

when I run my app using ionic cordova run browser my code works good. And I see in console this

Stored item!
fff

But when I use Native Storage at style.ts (service)

import { NativeStorage } from '@ionic-native/native-storage';

export class Style {

  constructor(private nativeStorage: NativeStorage) {}

  set (val: string) {
    this.nativeStorage.setItem('style', {color: val})
    .then(
      () => console.log('Stored item!'),
      error => console.error('Error storing item', error)
    );
  }

  get (property: string) {
    this.nativeStorage.getItem('style')
    .then(
      data => console.log(data[property]),
      error => console.error(error)
    );
  }

}

and use my service in home.ts (component)

import { Component, OnInit } from '@angular/core';
import { Style } from '../../style/style';

export class HomePage implements OnInit{

  constructor(private style: Style) {}

  ngOnInit() {
    this.style.set('fff');
    this.style.get('color');
  }

}

I got this error on console

Uncaught Error: Can't resolve all parameters for Style: (?).
    at syntaxError (compiler.js:466)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15547)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15382)
    at CompileMetadataResolver._getInjectableMetadata (compiler.js:15362)
    at CompileMetadataResolver.getProviderMetadata (compiler.js:15722)
    at compiler.js:15633
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:15593)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15161)
    at JitCompiler._loadModules (compiler.js:33542)

knowing that style.ts (service) works good when I use not Native
Storage

My Question is when I use Native Storage in service How I avoid this error Can't resolve all parameters for Style: (?)

2

You need to add the Provider decorator to your Style class, and then add it to either your page module or app module (depending on whether you’re using lazy loading or not).

1 Like