Angular routing to a page I did not ask for upon start

Issue

I have an Angular 13 with Ionic 6 application that upon starting immediately routs to the signup page – before I asked it to.
I placed a console message in ngOnInit of that page and that is the first log row received:

@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
})
export class SignupPage implements OnInit {

constructor(
    public tgdb: TigergraphService,
    private countryGrades: CountryGradesService,
    private modalCtrl: ModalController,
    private alertCtrl: AlertController,
    private aws: AwsFileUploadService,
    private platform: Platform,
    private imgCompress: ImageCompressionService,
    private imageCompress: NgxImageCompressService
  ) { 
    this._aws = aws;
    this.platform.backButton.subscribeWithPriority(10, () => {
      console.log('Back button Handler was called!');
      this.navigateBack();
    });
  }

  ngOnInit() {
    console.log('Entered signup page.');

enter image description here

I cannot find what or where is this page being called.

In my app.module.ts:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule, SignupPageModule, HelpersPageModule, MyInvitationsPageModule, InvitationsResponsesPageModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

In my index.html:

<body>
  <app-root></app-root>
</body>

My app.component.html:

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

My app.component.ts:

import { Component } from '@angular/core';
import { AlertController, Platform } from '@ionic/angular';
import { Router } from '@angular/router';

import { SplashScreen } from '@capacitor/splash-screen';

import { LoggerService, LoggerAction, LoggerUserRole, LoggerUserType, LoggerAttention } from './services/logger.service';
import { FbNotificationsService } from './services/fb-notifications.service';
import { stringify } from 'querystring';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private fbNotifications: FbNotificationsService,
    private route: Router,
    public LoggerService: LoggerService,
    private alertCtrl: AlertController
  ) {
    this.initializeApp();
  }

 
  initializeApp() {
    this.platform.ready().then(async (source) => {
      
      console.log("platform source: " + source);

      try {
        await SplashScreen.hide();
       } catch (err) {
        console.log('This is normal in a browser: ', err);
       }
    });
    
  }

  async showAlert(header: string, message: string) {
    const alert = await this.alertCtrl.create({header: "Network Error", message: "Ooooops. I can't find any Internet at this time", buttons: ['Close']});
    await alert.present();
  }
}

My app-rounting.module.ts:

import { NgModule, Component } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'signup',
    loadChildren: () => import('./signup/signup.module').then( m => m.SignupPageModule)
    //component: SignupP1Page
  },
  {
    path: 'helpers',
    loadChildren: () => import('./helpers/helpers.module').then( m => m.HelpersPageModule)
  },
  {
    path: 'add-helper',
    loadChildren: () => import('./helpers/add-helper/add-helper.module').then( m => m.AddHelperPageModule)
  },
  {
    path: 'my-invitations',
    loadChildren: () => import('./my-invitations/my-invitations.module').then( m => m.MyInvitationsPageModule)
  },
  {
    path: 'chat',
    loadChildren: () => import('./chat/chat.module').then( m => m.ChatPageModule)
  },
  {
    path: 'invitations-responses',
    loadChildren: () => import('./invitations-responses/invitations-responses.module').then( m => m.InvitationsResponsesPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

How is this signup page being called?? where is this happening?
What am I missing?

Solution

You should delete from the imports of the modules that will later load in a lazy way

 @NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule], // DELETE THIS SignupPageModule, HelpersPageModule, MyInvitationsPageModule, InvitationsResponsesPageModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Answered By – Lautaro Lopez Ruiz

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.