No provider for [object Object]! appmodule find unknown module

This error had me stumped for the longest time, where my angular ionic5 app would compile, however, it just failed to run.

After trying organising my provider list to make it easier to compare what was or wasn’t loaded from other pages, I must have changed the order, which is what had made all the different.

While this isn’t the finished code, it’s a sample of what is now working for my app.module.ts file.

I did have the pages, under the providers section in a different order.


import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AuthService } from './auth.service';
import { BackgroundGeolocation, BackgroundGeolocationConfig, BackgroundGeolocationEvents, BackgroundGeolocationResponse } from '@ionic-native/background-geolocation/ngx';
import { BatteryStatus } from '@ionic-native/battery-status/ngx';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, ViewChild, ElementRef, NgModule, NgZone, ChangeDetectorRef } from '@angular/core'; 
import { GlobalsService } from './globals.service';
import { HTTP } from '@ionic-native/http/ngx';
import { HttpClient, HttpClientModule, HttpHeaders    } from '@angular/common/http';
import { IonicStorageModule } from '@ionic/storage-angular';
import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { HomePage  } from './home/home.page';
import { HomePageModule  } from './home/home.module';
import { LoginPage  } from './login/login.page';
import { LoginPageModule  } from './login/login.module';
import { MapPage } from './map/map.page';
import { MapPageModule } from './map/map.module';
import { NavController, ToastController, ModalController, Platform, NavParams, IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { RouteReuseStrategy   } from '@angular/router';
import { RouterModule, Router } from '@angular/router';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Storage } from '@ionic/storage'; 

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,   
    HttpClientModule,   
    HomePageModule,
    LoginPageModule,  
    MapPageModule,
    HttpClientModule, 
    IonicModule.forRoot(),
    AppRoutingModule,  
    IonicStorageModule.forRoot(),
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory,
        deps: [Storage],
      }}),
    IonicModule.forRoot(), AppRoutingModule],
  providers: [
    HomePage,
    LoginPage,
    MapPage, 
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    NavParams, 
    SQLite, 
    Component,
    StatusBar,
    GlobalsService,
    HTTP, 
    NavController,
    HttpClient,
    LocalNotifications,
    ModalController,
    BackgroundGeolocation,
    BatteryStatus, 
    ToastController, 
    AuthService, 
    Storage,
    NavParams, 
    IonicModule, 
    Platform,
    IonicRouteStrategy,
    HttpClientModule, 
    RouterModule    
  ], 
    exports: [ 
      SQLite  
  ],    
  bootstrap: [AppComponent],
})
export class AppModule {}

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: