Ionic Can not findモジュール '../providers/auth-service/auth-service'

Question

ionic 3.3.0でLogin/SignUpを作成しようとしています。 モジュール '../providers/auth-service/auth-service'が見つかりません。 login.tsファイル内にあります。助けてください！

のauth-service.ts

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

/* 
    Generated class for the AuthServiceProvider provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 
export class User { 
    name: string; 
    email: string; 

    constructor(name: string, email: string) { 
    this.name = name; 
    this.email = email; 
    } 
} 
@Injectable() 
export class AuthServiceProvider { 
    currentUser: User; 
    public login(credentials) { 
    if (credentials.email === null || credentials.password === null) { 
     return Observable.throw("Please insert credentials"); 
    } else { 
     return Observable.create(observer => { 
     // At this point make a request to your backend to make a real check! 
     let access = (credentials.password === "pass" && credentials.email === "email"); 
     this.currentUser = new User('ian', 'ianlikono@gmail.com'); 
     observer.next(access); 
     observer.complete(); 
     }); 
    } 
    } 
public register(credentials) { 
    if (credentials.email === null || credentials.password === null) { 
     return Observable.throw("Please insert credentials"); 
    } else { 
     // At this point store the credentials to your backend! 
     return Observable.create(observer => { 
     observer.next(true); 
     observer.complete(); 
     }); 
    } 
    } 
    public getUserInfo() : User { 
    return this.currentUser; 
    } 

    public logout() { 
    return Observable.create(observer => { 
     this.currentUser = null; 
     observer.next(true); 
     observer.complete(); 
    }); 
    } 
} 

login.ts

import { Component } from '@angular/core'; 
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular'; 
import { AuthServiceProvider } from '../providers/auth-service/auth-service'; 

@IonicPage() 
@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html', 
}) 
export class LoginPage { 
    loading: Loading; 
    registerCredentials = { email: '', password: '' }; 

    constructor(private nav: NavController, private auth: AuthServiceProvider, private alertCtrl: AlertController, private loadingCtrl: LoadingController) { } 

    public createAccount() { 
    this.nav.push('RegisterPage'); 
    } 

    public login() { 
    this.showLoading() 
    this.auth.login(this.registerCredentials).subscribe(allowed => { 
     if (allowed) {   
     this.nav.setRoot('HomePage'); 
     } else { 
     this.showError("Access Denied"); 
     } 
    }, 
     error => { 
     this.showError(error); 
     }); 
    } 

    showLoading() { 
    this.loading = this.loadingCtrl.create({ 
     content: 'Please wait...', 
     dismissOnPageChange: true 
    }); 
    this.loading.present(); 
    } 

    showError(text) { 
    this.loading.dismiss(); 

    let alert = this.alertCtrl.create({ 
     title: 'Fail', 
     subTitle: text, 
     buttons: ['OK'] 
    }); 
    alert.present(prompt); 
    } 
} 

スクリーンショットプログラム構造：

Answer 1

あなたのプロジェクト構造から、あなたのlogin.tsがありますログインフォルダ内にあり、loginフォルダはpagesフォルダ内にあります。

のでprovidersフォルダに到達するために、あなたはこの問題を解決しなければならない2つのフォルダのあなたを移動する必要があります

'../../providers/auth-service/auth-service' 

を記述する必要があります。

Answer 2

VSコードを使用している場合、「Typescript Hero」と「Typescript Toolbox」というプラグインをインストールすると、インポートに役立ちます。

実際には、「Typescript Toolbox」は、インポートした要素にカーソルを合わせると電球を表示し、電球からインポートを選択できます。非常に便利です。