I’m having very weird error messages concerning providers, dependency injection, and other random messages.
My code used to work before I changed something on my dev machine and now I get all these errors. It happens since I upgraded to Ionic 3.x. Could anyone verify that my package.json is correct?
{
"name": "podcast-player",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"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.1.3",
"@angular/compiler": "^4.2.6",
"@angular/compiler-cli": "^4.2.6",
"@angular/core": "^4.2.6",
"@angular/forms": "^4.1.3",
"@angular/http": "^4.1.3",
"@angular/platform-browser": "^4.1.3",
"@angular/platform-browser-dynamic": "^4.1.3",
"@angular/tsc-wrapped": "^4.2.6",
"@ionic-native/core": "^3.12.1",
"@ionic-native/native-storage": "^3.14.0",
"@ionic-native/splash-screen": "^3.14.0",
"@ionic-native/status-bar": "^3.12.1",
"@ionic/storage": "^2.0.1",
"bcrypt-nodejs": "0.0.3",
"cordova-browser": "^4.1.0",
"cordova-ios": "^4.1.1",
"cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-nativestorage": "^2.2.2",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.1",
"cordova-plugin-whitelist": "^1.3.1",
"ionic-angular": "^3.5.0",
"ionic-audio": "^3.1.0",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "^3.0.0",
"rxjs": "^5.4.2",
"sw-toolbox": "^3.6.0",
"zone.js": "^0.8.12"
},
"devDependencies": {
"@ionic/app-scripts": "^1.3.12",
"@ionic/cli-plugin-cordova": "1.4.0",
"@ionic/cli-plugin-ionic-angular": "1.3.1",
"typescript": "2.3.4"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "podcast-player: An Ionic project",
"cordova": {
"platforms": [
"browser",
"ios"
],
"plugins": {
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-nativestorage": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {}
}
}
}
I tried to rollback my project but found any working state, meaning maybe that my local environment is the problem. Here’s an example of one error I’m having (please note no syntax or any kind of errors is present in my providers)
MyApp_Host.html:1 ERROR Error: No provider for UserService!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.throwOrNull (core.es5.js:2649)
at ReflectiveInjector.getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector.getByKey (core.es5.js:2620)
at ReflectiveInjector.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9473)
at callFactory (core.es5.js:9556)
at createProviderInstance$1 (core.es5.js:9487)
at resolveNgModuleDep (core.es5.js:9469)
View_MyApp_Host_0 @ MyApp_Host.html:1
proxyClass @ compiler.es5.js:14963
DebugContext.logError @ core.es5.js:13396
ErrorHandler.handleError @ core.es5.js:1080
IonicErrorHandler.handleError @ ionic-error-handler.js:63
ApplicationRef.tick @ core.es5.js:4812
ApplicationRef_.loadComponent @ core.es5.js:4781
ApplicationRef.bootstrap @ core.es5.js:4769
(anonymous) @ core.es5.js:4545
PlatformRef_.moduleDoBootstrap @ core.es5.js:4545
(anonymous) @ core.es5.js:4507
t.invoke @ polyfills.js:3
onInvoke @ core.es5.js:3890
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.es5.js:3881
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
MyApp_Host.html:1 ERROR CONTEXT DebugContext {view: Object, nodeIndex: 5, nodeDef: Object, elDef: Object, elView: Object}
View_MyApp_Host_0 @ MyApp_Host.html:1
proxyClass @ compiler.es5.js:14963
DebugContext_.logError @ core.es5.js:13396
ErrorHandler.handleError @ core.es5.js:1085
IonicErrorHandler.handleError @ ionic-error-handler.js:63
ApplicationRef_.tick @ core.es5.js:4812
ApplicationRef_.loadComponent @ core.es5.js:4781
ApplicationRef.bootstrap @ core.es5.js:4769
(anonymous) @ core.es5.js:4545
PlatformRef_._moduleDoBootstrap @ core.es5.js:4545
(anonymous) @ core.es5.js:4507
t.invoke @ polyfills.js:3
onInvoke @ core.es5.js:3890
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.es5.js:3881
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
core.es5.js:2925
Is there any package version you see wrong? I’ve been looking at this for so long, I’m starting to wonder. Any help would be greatly appreciated. Thanks!
Here’s some more code just in case it might help.
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { NativeStorage } from '@ionic-native/native-storage';
import { IonicAudioModule } from 'ionic-audio';
import { MyApp } from './app.component';
import { SignInPage } from '../pages/sign-in/sign-in';
import { PodcastListPage } from '../pages/podcast-list/podcast-list';
import { EpisodeListPage } from '../pages/episode-list/episode-list';
import { ExplorePage } from '../pages/explore/explore';
@NgModule({
declarations: [
MyApp,
SignInPage,
PodcastListPage,
EpisodeListPage,
ExplorePage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonicAudioModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
SignInPage,
PodcastListPage,
EpisodeListPage,
ExplorePage
],
providers: [
StatusBar,
SplashScreen,
NativeStorage,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
app.component.ts
import { Component } from '@angular/core';
import { Platform, Events, LoadingController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Observable } from 'rxjs/Rx';
import { AudioService } from '../providers/audio-service';
import { PodcastService } from '../providers/podcast-service';
import { UserService } from '../providers/user-service';
import { SubscriptionService } from '../providers/subscription-service';
import { PreferencesService } from '../providers/preferences-service';
import { PodcastListPage } from '../pages/podcast-list/podcast-list';
import { SignInPage } from '../pages/sign-in/sign-in';
@Component({
templateUrl: 'app.html',
providers: [
AudioService,
PodcastService,
UserService,
PreferencesService,
SubscriptionService
]
})
export class MyApp {
rootPage: any = SignInPage;
preferences = null;
displayPlayer = false;
constructor(
platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
public events: Events,
public loadingCtrl: LoadingController,
public userService: UserService,
public preferencesService: PreferencesService,
public audioService: AudioService
) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
console.log('App Component Platform Ready!');
// listening for events
events.subscribe('user:login', () => {
this.userLoggedIn();
});
events.subscribe('user:logout', () => {
this.userLoggedOut();
});
});
}
// ...
