[英]Ionic 2 Error of X page is part of the declarations of 2 modules
我在这里经历了一些SO问题。 但是我无法获得此错误试图提示的内容。 请帮帮我。
最后,HIGHER MODULE表示哪个模块。 由于我是新手,所以这就是为什么无法正确获取它。
我的代码:
app.module.ts
@NgModule({
declarations: [
MyApp,
UsersPage,
ReposPage,
OrganisationsPage,
UserDetailsPage,
LoginPage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage,
UsersPage,
ReposPage,
OrganisationsPage,
UserDetailsPage,
],
Login.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule,IonicPage } from 'ionic-angular';
import { LoginPage } from './login';
//import { IonicPage } from 'ionic-angular';
@IonicPage()
@NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
],
entryComponents: [
LoginPage
],
exports: [
LoginPage
]
})
export class LoginPageModule {}
根据您的评论更新代码
app.module.ts
import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
loading: Loading;
registerCredentials = { email: '', password: '' };
constructor(private nav: NavController, private auth: AuthService, private alertCtrl: AlertController, private loadingCtrl: LoadingController) { }
public createAccount() {
this.nav.push('RegisterPage');
}
public login() {
this.showLoading()
this.auth.login(this.registerCredentials).subscribe(allowed => {
console.log(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);
}
}
login.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule,IonicPage } from 'ionic-angular';
import { LoginPage } from './login';
//import { IonicPage } from 'ionic-angular';
@NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
],
entryComponents: [
LoginPage
],
exports: [
LoginPage
]
})
export class LoginPageModule {}
登录名
import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
loading: Loading;
registerCredentials = { email: '', password: '' };
constructor(private nav: NavController, private auth: AuthService, private alertCtrl: AlertController, private loadingCtrl: LoadingController) { }
public createAccount() {
this.nav.push('RegisterPage');
}
public login() {
this.showLoading()
this.auth.login(this.registerCredentials).subscribe(allowed => {
console.log(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);
}
}
我假设您正在使用Ionic的“延迟加载”功能。 什么是错误的手段,是,你包括LoginPage
中declarations
数组的NgModule
无论是在AppModule
( app.module.ts
文件)和LoginPageModule
。
为了对其进行修复,请删除AppModule
的LoginPage
声明,如果您需要在应用程序中的某处使用LoginPage
(例如,如果您要推送该页面),请使用名称,但将其用作字符串,如下所示:
// Somewhere in your app
this.navCtrl.push('LoginPage'); // <- The name of the page is used as a string
由于页面名称现在是字符串,因此您不再需要导入LoginPage
// import { LoginPage } from '/path/to/login-page.ts'; <- You won't need to do this anymore
更新
就像您在文档中看到的一样(感谢@suraj),请检查您是否正在创建LoginPage
的模块,如下所示:
@NgModule({
declarations: [
MyPage
],
imports: [
IonicPageModule.forChild(MyPage)
],
entryComponents: [
MyPage
]
})
export class MyPageModule {}
并检查您是否在页面上添加了@IonicPage()
装饰器:
// Ionic
import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component({...})
export class MyPage {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.