[Solved] RC0 - `ionic-angular` components to be included in app.module.ts::providers[]?


#1

Since we inject ionic-angular components NavController, NavParams in other classes,

do we need to include them in the providers[] array of app.module.ts?

Because without importing them I am getting errors like,

error_handler.js:47EXCEPTION: Error in ./RootTabComponent class RootTabComponent_Host - inline template:0:0 caused by: No provider for NavController!

#2

@saiy2k I don’t think you need to include those explicitly in your module. What is in your app.module.ts file? Do you have in your @NgModule:

bootstrap: [IonicApp]
imports: [IonicModule.forRoot(MyApp)]

or something like this?

Is your RootTabComponent in your app.module.ts module or in another module?


#3

Now assigned a simple component, SplashComponent as rootPage in MyApp. Still same error No provider for NavController!

Here is my app.module.ts
import { BrowserModule } from “@angular/platform-browser”;
import { NgModule } from ‘@angular/core’;
import { HttpModule, Http } from ‘@angular/http’;

import { IonicApp           }   from    'ionic-angular';
import { IonicModule        }   from    'ionic-angular';
import { Platform           }   from    'ionic-angular';
import { NavController      }   from    'ionic-angular';
import { NavParams          }   from    'ionic-angular';
import { Storage            }   from    '@ionic/storage';

import { File               }   from    'ionic-native';
import { ImageResizer       }   from    'ionic-native';
import { ImageResizerOptions}   from    'ionic-native';
import { SQLite             }   from    'ionic-native';

import { AngularFireModule  }   from    'angularfire2';
import * as firebase            from    'firebase';

import { TranslateModule    }   from    'ng2-translate/ng2-translate';
import { TranslateService   }   from    'ng2-translate/ng2-translate';
import { TranslateLoader    }   from    'ng2-translate/ng2-translate';
import { TranslateStaticLoader} from    'ng2-translate/ng2-translate';
import { TranslatePipe      }   from    'ng2-translate/ng2-translate';

import { MyApp              }   from    './app.component';
import { EventService       }   from    '../pages/event/event.service';
import { NGOService         }   from    '../pages/ngo/ngo.service';
import { AlbumService       }   from    '../pages/shared/album.service';
import { ConfigService      }   from    '../pages/shared/config.service';
import { ConnectivityService}   from    '../pages/shared/connectivity-service';
import { FileSystemService  }   from    '../pages/shared/file-system.service';
import { LogService         }   from    '../pages/shared/log.service';
import { MasterDataService  }   from    '../pages/shared/master-data.service';
import { NotificationService}   from    '../pages/shared/notification.service';
import { SQLStorageService  }   from    '../pages/shared/sql-storage.service';
import { UtilityService     }   from    '../pages/shared/utility.service';
import { FacebookService    }   from    '../pages/social/facebook.service';
import { SocialNetworkService}  from    '../pages/social/social-network.service';
import { TwitterService     }   from    '../pages/social/twitter.service';
import { VolunteerService   }   from    '../pages/volunteer/volunteer.service';

import { ChatBoxComponent   }   from    '../pages/chat/chat-box.component';
import { EventCardComponent }   from    '../pages/event/event-card.component';
import { EventCoordinatorComponent                  }   from    '../pages/event/coordinator.component';

import { EventAlbumTabComponent}from    '../pages/event/album-tab.component';
import { EventHomeTabComponent} from    '../pages/event/home-tab.component';
import { EventInfoTabComponent} from    '../pages/event/info-tab.component';
import { EventListComponent }   from    '../pages/event/list.component';
import { EventMapTabComponent}  from    '../pages/event/map-tab.component';
import { FeedbackPage       }   from    '../pages/event/feedback/feedback.component';
import { ReviewPage         }   from    '../pages/event/review.component';
import { SlideShowComponent }   from    '../pages/event/slide-show.component';
import { EventTabRootComponent} from    '../pages/event/tab-root.component';
import { VolunteerEventHistoryComponent             }   from    '../pages/event/volunteer-event-history.component';
import { EventVolunteerTabComponent                 }   from    '../pages/event/volunteer-tab.component';
import { NGOListComponent   }   from    '../pages/ngo/list.component';
import { NGOProfileComponent}   from    '../pages/ngo/profile.component';
import { AboutUsComponent   }   from    '../pages/setting/about.component';
import { CausePreferenceComponent                   }   from    '../pages/setting/causePreference.component';
import { FeedbackComponent  }   from    '../pages/setting/feedback.component';
import { GeneralSettingComponent                    }   from    '../pages/setting/general.component';
import { InviteComponent    }   from    '../pages/setting/invite.component';
import { SettingListComponent}  from    '../pages/setting/list.component';
import { LocationPreferenceComponent                }  from     '../pages/setting/locationPreference.component';
import { NotificationConfigurationComponent         }  from     '../pages/setting/notification-configuration.component';
import { TimePreferenceComponent                    }  from     '../pages/setting/timePreference.component';
import { ImageViewerComponent}  from    '../pages/shared/image-viewer.component';
import { NotificationTabComponent                   }  from     '../pages/shared/notification-tab.component';
import { RootTabComponent   }  from     '../pages/shared/root-tab.component';
import { SignupComponent    }  from     '../pages/shared/signup.component';
import { SplashComponent    }  from     '../pages/shared/splash.component';
import { SocialConfigurationComponent               }  from     '../pages/social/social-configuration.component';
import { VolunteerChartsComponent                   }  from     '../pages/volunteer/charts.component';
import { VolunteerProfileComponent                  }  from     '../pages/volunteer/profile.component';

// Dev
export const firebaseConfig = {
	apiKey: "",
	authDomain: "",
	databaseURL: "",
	storageBucket: ""
};

export function translateStaticLoaderFactory(http: Http) {
    return new TranslateStaticLoader(http, '/assets/i18n', '.json');
}


@NgModule({

    declarations: [
        MyApp,

        ChatBoxComponent,
        EventCardComponent,
        EventCoordinatorComponent,

        EventAlbumTabComponent,
        EventHomeTabComponent,
        EventInfoTabComponent,
        EventListComponent,
        EventMapTabComponent,
        FeedbackPage,
        ReviewPage,
        SlideShowComponent,
        EventTabRootComponent,
        VolunteerEventHistoryComponent,
        EventVolunteerTabComponent,
        NGOListComponent,
        NGOProfileComponent,
        AboutUsComponent,
        CausePreferenceComponent,
        FeedbackComponent,
        GeneralSettingComponent,
        InviteComponent,
        SettingListComponent,
        LocationPreferenceComponent,
        NotificationConfigurationComponent,
        TimePreferenceComponent,
        ImageViewerComponent,
        NotificationTabComponent,
        RootTabComponent,
        SignupComponent,
        SplashComponent,
        SocialConfigurationComponent,
        VolunteerChartsComponent,
        VolunteerProfileComponent
    ],

    imports: [

        IonicModule.forRoot(MyApp),

        AngularFireModule.initializeApp(firebaseConfig),
        BrowserModule,
        HttpModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: translateStaticLoaderFactory,
            deps: [Http]
        })
    ],

    bootstrap: [IonicApp],

    entryComponents: [
        MyApp,

        EventAlbumTabComponent,
        EventHomeTabComponent,
        EventInfoTabComponent,
        EventListComponent,
        EventMapTabComponent,
        FeedbackPage,
        ReviewPage,
        SlideShowComponent,
        EventTabRootComponent,
        VolunteerEventHistoryComponent,
        EventVolunteerTabComponent,
        NGOListComponent,
        NGOProfileComponent,
        AboutUsComponent,
        CausePreferenceComponent,
        FeedbackComponent,
        GeneralSettingComponent,
        InviteComponent,
        SettingListComponent,
        LocationPreferenceComponent,
        NotificationConfigurationComponent,
        TimePreferenceComponent,
        ImageViewerComponent,
        NotificationTabComponent,
        RootTabComponent,
        SignupComponent,
        SplashComponent,
        SocialConfigurationComponent,
        VolunteerChartsComponent,
        VolunteerProfileComponent
    ],

    providers: [
        Platform,

        EventService,
        NGOService,
        AlbumService,
        ConfigService,
        ConnectivityService,
        FileSystemService,
        LogService,
        MasterDataService,
        NotificationService,
        SQLStorageService,
        UtilityService,
        FacebookService,
        SocialNetworkService,
        TwitterService,
        VolunteerService,

        Storage,
        TranslateService,

        File,
        ImageResizer,
        SQLite
    ],

    exports: [BrowserModule, HttpModule, TranslateModule]
})
export class AppModule {}

#4

I think the best approach in your case is to try to isolate the cause of the problem. You could comment the max amount of code you can in your module, especially the imports of other modules, until you can make it work.

For instance, create a simple page with nothing except a NavController injected, like the one below, and add only that page in your module (aside from the bootstrap and IonicModule.forRoot(MyApp)) and define it as your RootPage (remove other code from your AppComponent too), and see if it works. Then, go uncommenting the other pages and modules until you receive the error.

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

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  constructor(public navCtrl: NavController) { }
}

#5

Thanks. It helped. There were numerous issues. It’s working now :slight_smile: