Module has no exported module named PeopleService - Ionic - django

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

Answer 1

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.