Ionic2 오류: "스토리지 제공자 없음"

Ionic2 오류: "스토리지 제공자 없음"

제가 찾을 수 있는 모든 것을 읽고 실패한 후에, 저는 여기서 질문해야 합니다.

ionic2's Storage를 사용하려고 합니다. 의사가 시키는 대로요.

문서: https://ionicframework.com/docs/storage/

내 코드는 다음과 같습니다.

app-values.

    import { BrowserModule } from '@angular/platform-browser';
    import { ErrorHandler, NgModule } from '@angular/core';
    import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
    import { SplashScreen } from '@ionic-native/splash-screen';
    import { StatusBar } from '@ionic-native/status-bar';

    import { MyApp } from './app.component';
    import { HomePage } from '../pages/home/home';
    import { Intro } from '../pages/intro/intro';
    import { Checklist } from '../pages/checklist/checklist';
    // import { Http } from '@angular/http';
    import {IonicStorageModule} from '@ionic/Storage';
    import { Data } from '../providers/data';
    import {HttpModule} from '@angular/http';
    // import {Storage} from '@ionic/storage';


    @NgModule({
      declarations: [
        MyApp,
        HomePage,
        Intro,
        Checklist
      ],
      imports: [
        HttpModule,
        BrowserModule,
        IonicModule.forRoot(MyApp),
        IonicStorageModule.forRoot()
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        HomePage,
        Intro,
        Checklist
      ],
      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
        // Storage,
        //Http,
        Data
      ],
    })
    export class AppModule {}


data.ts

import { Injectable } from '@angular/core';
// import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
// import { HttpModule } from '@angular/http';

import { Storage } from '@ionic/storage';


@Injectable()
export class Data {
  constructor(public storage: Storage) {
  }
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  getData(): Promise<any> {
    return this.storage.get('checklists');
  }
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  save(data): void {
    let saveData = [];
    //Remove observables
    data.forEach((checklist) => {
      saveData.push({
        title: checklist.title,
        items: checklist.items
      });
    });
    let newData = JSON.stringify(saveData);
    this.storage.set('checklists', newData);
  }
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
}

홈.ts

// import { Component } from '@angular/core';
// import { NavController } from 'ionic-angular';

// @Component({
//   selector: 'page-home',
//   templateUrl: 'home.html'
// })
// export class HomePage {

//   constructor(public navCtrl: NavController) {

//   }

// }


import { Component } from '@angular/core';
import { NavController, AlertController, Platform } from 'ionic-angular';
import { Checklist } from '../checklist/checklist';
import { ChecklistModel } from '../../models/checklist-model';
import { Data } from '../../providers/data';
import { Keyboard } from 'ionic-native';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  checklists: ChecklistModel[] = [];

  constructor(public navCtrl: NavController, public dataService: Data,
    public alertCtrl: AlertController, public platform: Platform) {
  }

  // constructor(public navCtrl: NavController, public alertCtrl: AlertController, public platform: Platform) {
  //   // this.checklists.push(new ChecklistModel("Noam", [1,2,3]));
  // }
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////
  ionViewDidLoad() {
  }
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////
  addChecklist(): void {
    let prompt = this.alertCtrl.create({
      title: 'New Checklist',
      message: 'Enter the name of your new checklist below:',
      inputs: [
        {
          name: 'name'
        }
      ],
      buttons: [
        {
          text: 'Cancel'
        },
        {
          text: 'Save',
          handler: data => {
            let newChecklist = new ChecklistModel(data.name, []);
            this.checklists.push(newChecklist);
            newChecklist.checklistUpdates().subscribe(update => {
              this.save();
            });
            this.save();
          }
        }
      ]
    });
    prompt.present();
  }
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////
  renameChecklist(checklist): void {
    let prompt = this.alertCtrl.create({
      title: 'Rename Checklist',

      message: 'Enter the new name of this checklist below:',
      inputs: [
        {
          name: 'name'
        }
      ],
      buttons: [
        {
          text: 'Cancel'
        },
        {
          text: 'Save',
          handler: data => {
            let index = this.checklists.indexOf(checklist);
            if (index > -1) {
              this.checklists[index].setTitle(data.name);
              this.save();
            }
          }
        }
      ]
    });
    prompt.present();
  }
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////
  viewChecklist(checklist): void {
    this.navCtrl.push(Checklist, {
      checklist: checklist
    });
  }
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////
  removeChecklist(checklist): void {
    let index = this.checklists.indexOf(checklist);
    if (index > -1) {
      this.checklists.splice(index, 1);
      this.save();
    }
  }
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////
  save(): void {
    Keyboard.close();
    this.dataService.save(this.checklists);
  }
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////
}

스토리지를 호출하여 사용해야 하는 방법은 홈 페이지의save().

하지만 그렇게 멀리 갈 수는 없어요, 왜냐하면 페이지가 로딩되기도 전에, 저는

런타임 오류가 발견되지 않았습니다(예정 없음).오류: 스토리지 제공자가 없습니다!주입 시 g(http://localhost:8100/build/polyfills.js:3:7133)에서 오류 발생 Reflective에서 공급자 오류가 없는 경우 오류(http://localhost:8100/build/main.js:1585:86)가 발생했습니다.Reflective에서 Injector_.throwOrNull(http://localhost:8100/build/main.js:3125:19)인젝터.Reflective에서 getByKeyDefault(http://localhost:8100/build/main.js:3164:25)인젝터.Reflective에서 getByKey(http://localhost:8100/build/main.js:3096:25)AppModule에서 Injector.get(http://localhost:8100/build/main.js:2965:21)AppModule에서 Injector.get(ng:///AppModule/module.ngfactory.js:254:82)인젝터.getAppModule의 내부(ng:///AppModule/module.ngfactory.js:481:44)인젝터.Ng 모듈Injector.get(http://localhost:8100/build/main.js:3929:44)은 DirectiveInstance(http://localhost:8100/build/main.js:11202:32)의 createDep(http:/localhost:8100/main.js:1334:45)에서 생성됩니다(http:37nodes/main.37:378.js:00).main.main.maind.main.main:37nodes.http://localhost:8100/build/main.js:12282:5)

패키지.json:

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "config": {
    "ionic_source_map": "source-map"
  },
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "^2.0.1",
    "ionic-angular": "3.0.1",
    "ionic-native": "^2.9.0",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "typescript": "~2.2.1",
    "webpack": "^2.4.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "quicklists: An Ionic project"
}

의사 선생님이 말씀하신 대로 다 했으니 가르쳐 주세요 - 스토리지를 찾을 수 없게 만드는 것은 여전히 무엇입니까?

감사해요.

편집

이 대답은 많은 지지를 얻곤 했지만, 그것은 중단되었습니다.

이것은 버전 업데이트/버그 수정 때문이라고 추측할 수밖에 없습니다.

이 솔루션을 진행하기 전에 각도를 업데이트하는 것이 좋습니다.

---

먼저 다음을 설치해야 합니다.npm install --save @ionic/storage

app.ts에서 문제가 발생했습니다.

import {IonicStorageModule} from '@ionic/Storage';

비자본 's' 대신 대문자 'S':

from '@ionic/Storage'

다음 대신:

from '@ionic/storage'

문제가 있다면 컴파일러가 왜 그것을 잡지 못했는지 모르겠지만, 그것은 그렇지 않았습니다.

@chairmanmow 덕분에

저의 경우, app.module.ts에 다음을 추가하는 것을 잊었습니다.

import { IonicStorageModule } from '@ionic/storage';

@NgModul({ 
  ..., 
  Imports: [
  ...
    IonicStorageModule.forRoot()
],

먼저 이 npm 설치를 수행합니다. --저장 @ionic/스토리지

저는 이것을 사용하여 이것을 작동시킬 수 있었습니다.

에 안에.app.module.ts

import { Storage } from '@ionic/storage';

그리고...

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, Storage]

에 제 에.page.ts

import { Storage } from '@ionic/storage';

생성자에서...

public storage: Storage

그리고 내 코드의 핵심 안에서...

this.storage.get('date').then((value) => {
  // blah
});

저도 같은 문제가 있었습니다.을 에추했니다에 했습니다.app.module.ts:

import { IonicStorageModule } from '@ionic/storage';

그리고, 이것은 부품을 가져오기 위한 것입니다.app.module.ts:

IonicStorageModule.forRoot(),

2021 Ionic Storage v3 Angular:

import { IonicStorageModule } from '@ionic/storage-angular';
IonicStorageModule.forRoot(),

저도 같은 문제가 있었습니다.메모을다추것기을억오시십하가에 하는 것을 하세요.app.module.ts

import { IonicStorageModule } from '@ionic/storage';

@NgModule({ 
  ..., 
  Imports: [
    ...
    IonicStorageModule.forRoot()
  ],
  ....
})

또한 실제 파일을 가져오는지 확인합니다.Storage@ionic/storage-angular.

constructor(private storage: Storage) { }

위의 내용은 문제가 없어 보이고 포함하지 않더라도 오류가 나타나지 않습니다.

import { Storage } from '@ionic/storage-angular'

파일 맨 위에 있습니다.그것은 원주민들 때문인 것 같습니다.Storage 세으로가한에서 가능window물건.

doc에서 설명한 바와 같은 주사(https://github.com/ionic-team/ionic-storage), 는 잘 작동합니다.

나는 처음에 이 정보를 놓쳤습니다."이 접근 방식은 단일 구성 요소에서 사용하기 위한 것입니다." 그래서 AppComponent와 HomePage 모두에 사용하면 정확히 이 오류가 발생했습니다.

app.component.ts를 이전 상태로 복원했는데 지금은 모두 정상입니다.(이온성 6.20.1에서 작동)

언급URL : https://stackoverflow.com/questions/43460513/ionic2-error-no-provider-for-storage