离子错误：帮助解决它

Question

我有服务

 import {Injectable} from '@angular/core';
 import {Http} from '@angular/http';
 import 'rxjs/Rx';

@Injectable()
export class MainService{
http:any;
baseUrl:String;

constructor (http:Http){
    this.http = http;
    this.baseUrl = 'https://someurl.ru/api/';
}

getCategories(){
    return this.http.get(this.someurl+ 'catalog.getTopCategories').map(res => {
        return res.json();
    })
 }}

我在我的app.component

中宣布了它

import { Component } from '@angular/core';
 import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import {MainService} from './services/main.service';

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

 @Component({
 templateUrl: 'app.html',
 providers: [MainService]
 })
 export class MyApp {
     rootPage:any = TabsPage;

     constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
     SplashScreen) {
      platform.ready().then(() => {
     statusBar.styleDefault();
   splashScreen.hide();
   });
 }
}

然后我开始项目它给了我一个错误：

未捕获错误：遇到未定义的提供商！通常这意味着你有一个循环依赖（可能是由于使用'桶'index.ts文件引起的。

我该如何解决？