ionic2 provider "cannot load module"

Question

I'm trying to add a provider to my application,but getting this error

Uncaught Error: Cannot find module "../providers/login/loginservice"

Project structure

Here is how the app.module.ts looks

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpModule} from '@angular/http';


import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Loginpage } from '../pages/loginpage/loginpage';

import { Loginservice } from '../providers/login/loginservice';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Loginpage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Loginpage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Loginservice,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

loginpage.ts where i'm trying to use the provider

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Loginservice } from '../../providers/login/loginservice';

/**
 * Generated class for the Loginpage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-loginpage',
  templateUrl: 'loginpage.html'
  })
export class Loginpage {

  constructor(public navCtrl: NavController, public navParams: NavParams,public loginservice : Loginservice) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Loginpage');
  }
  login(){
    console.log("inside Login");
    //this.loginservice.doLogin();
  }

}

*Update:Adding the loginservice code.

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

/*
  Generated class for the Loginservice provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Loginservice {

  constructor(public http: Http) {
    console.log('Hello Loginservice Provider');
  }

}

I'm not able to find any solution to this. I tried changing the paths and removing and adding the provider again. as of now the provider doesn't have any functionality as i'm j ust trying ti successfully import it.

Error Screenshot

Please guide me.

Thanks Shruti Nair

loginservice.ts doesn't have any code at all..? Or do you have the export function in the file and still get this error..? — Raja Yogan, Apr 26 '17 at 06:08
@raja:I have added the loginservice file as well.It has the export function — Shruti Nair, Apr 26 '17 at 06:20
Move your `loginservice` to `pages` folder then import it with new path. Is it imported? — Duannx, Apr 26 '17 at 06:36
I tried restarting but nothing still the same error in terminal typescript: src/pages/loginpage/loginpage.ts, line: 18 Cannot find name 'Loginservice'. L18: constructor(public navCtrl: NavController, public navParams: NavParams,public loginservice : Loginservice) { — Shruti Nair, Apr 26 '17 at 06:40
This error usually occurs when there is a problem with the imports. Check all the imports and If you have a github repo for this, kindly share the link. — Raja Yogan, Apr 26 '17 at 06:51
@Duannx:i copied the file to pages folder and then tried importing it and it worked. But is it the right way?and what would be the reason for this behaviour.Cant we keep it in seperate provider folder and then import it. — Shruti Nair, Apr 26 '17 at 06:55
I tried keeping it in a separate provider folder, and it works fine.. — Raja Yogan, Apr 26 '17 at 07:00
@Raja:Can u help me find my mistake?.I think my imports and paths are correct so then whats the issue. — Shruti Nair, Apr 26 '17 at 07:02
@ShrutiNair Ensure that you correctly use @IonicPage() annotation. — Math10, Apr 26 '17 at 07:13
I think, you might not have saved the file, because the first error you posted was Uncaught Error: Cannot find module "../providers/login/loginservice; whereas the file was at '../../providers/login/loginservice; — Raja Yogan, Apr 26 '17 at 07:18
@ShrutiNair: It is not the right way. Do it to check your provider file is fine. Seem like your error orccur only in `loginpage.ts file`, not in `app.module.ts` file right? — Duannx, Apr 26 '17 at 07:23
Please check the code at github https://github.com/shruti1006/Ecart This again is causing the same problem. Let me know if u get a solution — Shruti Nair, Apr 26 '17 at 09:08

score 0 · Accepted Answer · answered Apr 26 '17 at 09:46

Looking at the code you provided in the link above

In the src/providers directory you have the loginservice.ts file but in loginpage.ts your import is

import { Loginservice } from '../../providers/login/loginservice';

There is no login directory, so the import should be

import { Loginservice } from '../../providers/loginservice';

Kindly change it in the app.module.ts file as well

import { Loginservice } from '../providers/loginservice';

Hope this helps you, Thanks.

ionic2 provider "cannot load module"

1 Answers1