typescript ionic 4存储注入错误：没有提供者

ou6hu8tu 于 12个月前发布在 TypeScript

关注(0)|答案(4)|浏览(117)

因此，我在node 8.x上运行ionic 4，试图将Storage注入到应用程序中，以便从我的auth服务中检索令牌，但我得到了以下错误：

StaticInjectorError(AppModule)[Storage]: 
  StaticInjectorError(Platform: core)[Storage]: 
    NullInjectorError: No provider for Storage!
    at

我读了其他人关于同样的问题，但他们似乎有类型错误，我不认为这是事实。
这是我应用程序。模块

import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouteReuseStrategy } from '@angular/router';

  import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
  import { SplashScreen } from '@ionic-native/splash-screen/ngx';
  import { StatusBar } from '@ionic-native/status-bar/ngx';

  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing.module';

  import { HttpClientModule } from '@angular/common/http';
  import { Storage, IonicStorageModule } from '@ionic/storage';
  import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';

  export function jwtOptionFactory(storage) {
    return {
      tokenGetter: () => {
        return storage.get('access_token')
      },
      whitelistedDomains: ['localhost:5000']
    }
  }

  @NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
      BrowserModule, 
      IonicModule.forRoot(),
      AppRoutingModule,
      HttpClientModule, 
      IonicStorageModule.forRoot(),
      JwtModule.forRoot({
        jwtOptionsProvider: {
          provide: JWT_OPTIONS,
          useFactory: jwtOptionFactory,
          deps: [Storage]
        }
      })
    ],
    providers: [
      StatusBar,
      SplashScreen,
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}

我认为错误是指deps: [Storage]，但我似乎找不到解决方案。

typescript

来源：https://stackoverflow.com/questions/54516510/ionic-4-storage-injection-error-no-provider

4条答案

按热度按时间

3phpmpom1#

我也有同样的问题...在app.module.ts中添加以下行后，问题得到解决
import { IonicStorageModule } from '@ionic/storage' ;
在进口一节中增加同样的内容：

imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    AppRoutingModule
  ]

赞(0）回复(0）举报 12个月前

bvjveswy2#

对于任何从Google来到这里使用PhpStorm的人，我的问题是，可能是因为app.module导入，我使用存储的页面没有自动添加导入语句。所以我的代码从看起来像：

export class MyApp {
  constructor(private storage: Storage) { }

  ...

  // set a key/value
  storage.set('name', 'Max');

  // Or to get a key/value pair
  storage.get('age').then((val) => {
    console.log('Your age is', val);
  });
}

对此：

import { Storage } from '@ionic/storage'; // This line added manually.

export class MyApp {
  constructor(private storage: Storage) { }

  ...

  // set a key/value
  storage.set('name', 'Max');

  // Or to get a key/value pair
  storage.get('age').then((val) => {
    console.log('Your age is', val);
  });
}

赞(0）回复(0）举报 12个月前

46scxncf3#

我在No provider for Storage上遇到了同样的问题。
然而，我的问题是我的IDE自动导入只生成import { IonicStorageModule } from "@ionic/storage";。添加Storage,后问题已修复。这不是你的情况，但希望以后能帮助其他读者。

赞(0）回复(0）举报 12个月前

ee7vknir4#

如果你在你自己的component.ts文件中导出了错误的存储依赖注入，它会在我的情况下给给予这个错误，而不是存储，我在调试后得到了这个错误，在正确导入后，我的错误得到了解决

赞(0）回复(0）举报 12个月前