Module has no exported module named PeopleService - Ionic

Question

I have been folllowing the ionic tutorial: 10 Minutes with Ionic 2: Calling an API

Typescript Error Module '"C:/Users/grace/imaginemai/client/apiApp/src/providers/people->service/people-service"' has no exported member 'PeopleSevice'. C:/Users/grace/imaginemai/client/apiApp/src/pages/home/home.ts

import { NavController } from 'ionic-angular';

import {PeopleSevice} from >'C:\Users\grace\imaginemai\client\apiApp\src\providers\people-> >service\people-service';

I am not sure what I am doing wrong. I noticed that there were possible errors with the original tutorial so I made some amendments as per a correction posted in the comments: https://github.com/ah3243/ionic2ApiExample/blob/master/src/providers/people-search.ts

I am still having issues - I've followed the tutorial but used my own API from a blog I am developing with Django. So although the ionic app is called peopleservice, I am expecting it to produce blog posts. The code is pasted below. Please could someone tell me what I am doing wrong.

Thanks in advance.

people-service.ts:

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

/*
  Generated class for the PeopleServiceProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class PeopleService {
  data1: any;
  constructor(public http: Http) {
    console.log('Hello PeopleService Provider');
  }

  load() {
    if (this.data1) {
      return Promise.resolve(this.data1);
      }
      //dont have the data yet
      return new Promise(resolve => {
      this.http.get('localhost:8000/posts/')
        .map(res => res.json())
        .subscribe(data => {
          this.data1 = data.results;
          resolve(this.data1);
          });
      });
    }

}

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {PeopleSevice} from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [PeopleSevice]
})
export class HomePage {
  public posts: any;
  constructor(public navCtrl: NavController, public peopleService: PeopleService) {
    this.loadPosts();

  }

  loadPosts() {
    this.PeopleService.load()
      .then(data1 => {
        this.posts = data1;
      })

    }

}

app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
/*import { PeopleService } from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';*/

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    /*StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    PeopleService*/
  ]
})
export class AppModule {}

app.component.ts:

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 { TabsPage } from '../pages/tabs/tabs';
import { PeopleService } from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';

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

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

home.html:

<ion-header>
  <ion-navbar *navbar>
    <ion-title>
      Home
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="home">
  <ion-list>
    <ion-item *ngFor="let post of posts">
      <h2>{{post.title}}</h2>
      <p>{{post.text}}</p>
    </ion-item>
  </ion-list>
</ion-content>

folder structure:

blog
>client
 >apiApp
  >src
   >app
    >app.component.ts
    >app.html
    >app.module.ts
    >app.scss
    >main.ts
   >pages
   >providers
    >people-service
     >people-service.ts

Suraj Rao Suraj Rao · Accepted Answer · 2017-06-03T09:24:52

You have to use relative paths for importing.

import {PeopleSevice} from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';

This kind of absolute path will not work.

Try:

import {PeopleSevice} from '../../providers/people-service/people-service';

This is the relative path from the current file.

Module has no exported module named PeopleService - Ionic

1 Answers