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.');
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?
CodePudding user response:
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 {}