Ionic 2 rc0 whitescreen (No provider for ConnectionBackend!)

Hello folks,

I started a new ionic 2 rc0 app by copying the files of my old beta11 project. I did the necessary steps as described under
Copying your Project to a New Project : rc0 changelog

Now finally after getting no more compiler errors when I run

ionic run android -c

I’m just getting a whitescreen on my android phone.

Chrome debug is logging me

Uncaught Error: No provider for t!

When Im running

ionic serve -c

the firefox logs me

Unhandled Promise rejection: No provider for ConnectionBackend! ; Zone: ; Task: Promise.then ; Value: Object { …

app.module.ts looks like:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Storage } from '@ionic/storage'; // special thing
import { Http } from '@angular/http';#

// other imports ....

@NgModule({
  declarations: [
    MyApp,
    // PAGES
    // MODALS
    // CUSTOM COMPONENTS
    // DIRECTIVES
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // PAGES
    // MODALS
  ],
  providers: [
    Storage,
    Http,
    // SERVICES/PROVIDERS
  ]
})
export class AppModule {}

I’m guessing there is something wrong with a provider somewhere, but I just can’t find a solution …

System running on ubuntu 16.04 / node v6.7.0 / npm v3.10.3

EDIT :

I started a new sidemenu project with

ionic start debugProject sidemenu --v2
I did this to to debug the providers by sequentially adding the providers of my original Project. I’t appears that, when I inject the first provider called “Config” in the constructor of app.components.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { TabsPage } from '../pages/tabs/tabs';

// PROVIDERS -> providers
import { Config } from '../providers/config/config';


@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {

  rootPage = TabsPage;

  constructor(
    platform  : Platform,
    config    : Config    <-------------(HERE !!! )
  ) { .....

I get the the Error message like before:

Unhandled Promise rejection: No provider for ConnectionBackend! ; Zone: ; Task: Promise.then ; Value: Object { …

config.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

// providers
import { Http } from '@angular/http';
//import { DB } from '../db/db';


@Injectable()
export class Config {

  public data : any;

  constructor(
    public http : Http,
    //public db   : DB
  ){
    this.data = {};
  }

  loadDefault() {
    this.data = {
    ..........................
    // DATA OBJECT DEFINITIONS
    ...........................
    };
    return Promise.resolve("default settings applied");
  }

  loadSettingsFromDB(){
    return Promise.resolve("no local settings from db for now");
  }

  // TODO: send settings to server
  saveSettingsToDB(settings){
    return Promise.resolve("cant save settings for now");
  }

  handleError(err) : void {
    // error stacktrace gets returned on development mode
    try{
      err = err.json();
    }catch(e){}
    var msg = err.message || "LOADING ERROR";
    if(err.error){
      msg += err.error;
      //Toast.showLongBottom(msg).subscribe();
    }else{
      //Toast.showShortBottom(msg).subscribe();
    }
    console.log("ERROR in config.ts");
    console.log(msg);
    console.log(err);
  }

}

any ideas ?

Hi! I’m facing the same error. I noticed that if I set another Page as the rootPage (in my app.component.ts) it works. I hope someone has an idea on how to solve this :slight_smile:

gonna try that out later. Hope that brings me forward …

@BenDie

Hi! I’m facing the same error. I noticed that if I set another Page as the rootPage (in my app.component.ts) it works. I hope someone has an idea on how to solve this :slight_smile:

sry, but changing the rootPage does not work either, the problem seems to be injecting my custom Config provider … Could there be a missing module ?

I found the solution. It seems like I can’t/shouldn’t use the Http module in the providers array in app.modules.ts (In beta11 this was not a problem). My Config module relied on Htpp, so after constructing Config the application the Error (No provider for ConnectionBackend) fired …

@BenDie

Maybe you had the same problem and used a page as the rootPage which contained Http as a service …

My rootPage contained a service which contains Http respectively. I’ll try removing the HttpModule from my app.module.ts’ provider array.

Edit: Still getting a main.js:8 EXCEPTION: No provider for t! :unamused:

See https://github.com/driftyco/ionic/issues/8292, which solved the problem for me (by enabling me to debug)

1 Like