非常令人困惑的 Ionic 错误 - 2 个声明或 none

Question

（我来自德国，如果我的英语有点乱，请见谅...）

您好，我正在尝试创建一个 Ionic-App，它具有基于本教程的 register/login 功能： https://devdactic.com/login-ionic-2/

如果我完全像这样从显示的 app.module.ts 中复制代码，我将始终得到错误

“No component factory found for LoginPage. Did you add it to @NgModule.entryComponents?”

当我尝试执行代码时（ionic serve 或 ionic serve -l）。

为了修复此错误，我将 LoginPage 添加到 app.module.ts 中的声明和 entryComponents，因此我的代码如下所示：

import { AuthServiceProvider } from './../providers/auth-service/auth-service';
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 { MyApp } from './app.component';
import { LoginPage } from '../pages/login/login';

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

现在我可以打开应用程序，登录并访问登录后的“会员区”，一切似乎都正常。但是如果我尝试注销，我会收到一个新错误。

“Type LoginPage is part of the declarations of 2 modules: AppModule and LoginPageModule!”

这条消息是有道理的，因为我确实两次声明了 LoginPage，所以我删除了 login.module.ts（因为我知道我显然需要 app.module.ts 中的声明）。这是令人困惑的一点：在我这样做之后，我得到了另一个新错误，上面写着

“Component LoginPage is not part of any NgModule or the module has not been imported to your module”!

总结：我只能声明“LoginPage”一次——如果我声明两次，我会得到一个错误。如果我删除其中的 ONE，我会得到另一个错误，我在任何地方声明它......

现在我真的非常非常绝望如何解决这个问题以及如何摆脱恶性循环！ :-(

如果我在注销后将 RegisterPage（而不是 LoginPage）设置为 root，则可以正常工作。但是如果我尝试在开始时（登录前）将 RegisterPage 设置为 root，我会遇到与开始时相同的问题......

在互联网上我只发现了“2 declarations”错误或“not part of any”错误的案例，但从来没有同时出现过，所以我真的希望有人能帮助我解决我的问题…

非常感谢您！

以下是我的代码和错误消息的一些摘录：

Screenshot of error no. 1

Screenshot of error no. 2

Screenshot of error no. 3

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 { RegisterPage } from '../pages/register/register';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = RegisterPage;

  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.ts

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

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

    username = '';
    email = '';

    constructor(private navCtrl: NavController, private auth: AuthServiceProvider) {
        let info = this.auth.getUserInfo();
        this.username = info['username'];
        this.email = info['email'];
    }

    public logout() {
        this.auth.logout().subscribe(succ => {
            this.navCtrl.setRoot('LoginPage');
            // (if I replace 'LoginPage' with 'RegisterPage', it'll work)
        });
    }
}

Answer 1

似乎您应该将 LoginPage 从声明中移出（因为它在模块中声明）并在 imports 下添加 LoginPageModule。

import { LoginPageModule } from '../pages/login/login.module';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    LoginPageModule,
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {
      provide: ErrorHandler,
      useClass: IonicErrorHandler
    },
    AuthServiceProvider
  ]
})

非常令人困惑的 Ionic 错误 - 2 个声明或 none

Very confusing Ionic error - either 2 declarations or none

javascript

ionic-framework

ionic2

ionic-native

angular