Very confusing Ionic error - either 2 declarations or none

Question

(I’m from Germany, so I’m sorry if my English is a little messy…)

Hello, I am trying to create an Ionic-App, which has a register/login function based on this tutorial: https://devdactic.com/login-ionic-2/

If I copy the code from the shown app.module.ts exactly like this, I’ll always get the error

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

when I try to execute the Code (ionic serve or ionic serve -l).

To fix this error, I added the LoginPage to the declarations and entryComponents in the app.module.ts, so my Code looks like this:

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 {}

Now I could open the App, login and visit the “member-area” behind the login and everything seemed to work fine. But if I try to logout, I get a new error.

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

This message makes sense, because it’s true, that I declared LoginPage twice, so I removed the login.module.ts (because I know that I need the declarations in the app.module.ts apparently). And this is the confusing point: After I did this, I got another new error, which says

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

Summarized: I may declare “LoginPage” only once – if I do it twice, I’ll get an error. If I remove ONE of them, I’ll get another error, that I declared it nowhere…

And now I am really, really desperate how to solve this problem and how to escape the vicious circle! :-(

If I set the RegisterPage (instead of the LoginPage) as root after logout, this works fine. But if I try to set the RegisterPage as root in the beginning (before login), I’ll get the same issue as at the beginning…

On the internet I found only cases with either the “2 declarations”-error OR the “not part of any”-error, but never both, so I really hope, that someone can help me to solve my problem…

Thank you very much in advance!

Here are some extracts of my Code and error messages:

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

Seems that you should move LoginPage out from declarations (as it is declared in module) and add LoginPageModule under imports.

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
  ]
})