web-dev-qa-db-ja.com

初期化前に 'LoginPageModule'にアクセスできませんionic 4

ionic 4個のアプリにGoogleログインを挿入しようとしています。ログインボタンをクリックするたびに問題が発生します have a problem like this

Cannot access 'LoginPageModule' before initialization

そしてlogin.page.tsからの私のコードは次のようになります

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { GooglePlus } from '@ionic-native/google-plus';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage{

  displayName: any;
  email: any;
  familyName: any;
  givenName: any;
  userId: any;
  imageUrl: any;

  isLoggedIn:boolean = false;

  constructor(
    public navCtrl: NavController,
    public googlePlus: GooglePlus
  ) { }

  login() {
    this.googlePlus.login({})
      .then(res => {
        console.log(res);
        this.displayName = res.displayName;
        this.email = res.email;
        this.familyName = res.familyName;
        this.givenName = res.givenName;
        this.userId = res.userId;
        this.imageUrl = res.imageUrl;
        this.isLoggedIn = true;
      })
      .catch(err => console.error(err));
  }

  logout() {
    this.googlePlus.logout()
      .then(res => {
        console.log(res);
        this.displayName = "";
        this.email = "";
        this.familyName = "";
        this.givenName = "";
        this.userId = "";
        this.imageUrl = "";

        this.isLoggedIn = false;
      })
      .catch(err => console.error(err));
  }

  ngOnInit() {

  }

}

私は別のアプローチを試しましたが、まだこのエラーが発生します、誰でもそれを解決する方法を知っていますか？

heres login.module.ts、これまで触れたことはありませんが、LoginPageModuleがここにあるので、問題はここからですか？

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { LoginPage } from './login.page';

const routes: Routes = [
  {
    path: '',
    component: LoginPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}
angularionic-frameworkionic4
3
naoval

Ionic 4を使用しているため、インポートディレクトリ文字列に/ngxを追加する必要があります。正しいインポートは-

login.page.ts

import { GooglePlus } from '@ionic-native/google-plus/ngx';

また、このようにモジュールプロバイダーにGooglePlusを追加する必要があります-

login.module.ts

...
import { GooglePlus } from '@ionic-native/google-plus/ngx';

...

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [LoginPage],
  providers: [GooglePlus]
})
export class LoginPageModule {}
2
arif08