Unable to route to any component in Angular 13 application

Question

I am currently building a project and I have decided to make it bigger than my initial scope. I moved some of the existing components into a new module called UserModule and now once I serve the application, no page actually loads.

In total I have 2 additional modules(UserModule and AuthModule) and they also have their own respective routing modules and then the original AppModule(I also moved the routing part out of this into its own file).

Here I import both the other modules and its own AppRoutingModule

AppModule:

@NgModule({
declarations: [
 AppComponent,
 HeaderComponent,
 RecipesContainerComponent,
 RecipeDisplayCardComponent,
 MainComponent,
 RecipeComponent,
 ViewRecipeComponent,
],

imports: [
 BrowserModule,
 AppRoutingModule,
 AuthModule,
 UserModule,
 ReactiveFormsModule,
 provideFirebaseApp(() => initializeApp(environment.firebase)),
 provideAuth(() => getAuth()),
 provideFirestore(() => getFirestore()),
 BrowserAnimationsModule,
],

exports: [RouterModule, ReactiveFormsModule],
providers: [RecipeService],
bootstrap: [AppComponent],
})

  export class AppModule {}

AppRoutingModule

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['']);

let routes: Routes = [
{
    path: 'main',
    component: MainComponent,
children: [
  {
    path: '',
    component: RecipesContainerComponent,
  },
  {
    path: 'recipe',
    component: RecipeComponent,
  },
  {
    path: 'recipe-list',
    component: RecipesContainerComponent,
  },
  {
    path: 'recipe/:id',
    component: RecipeComponent,
  },
  {
    path: 'view-recipe/:id',
    component: ViewRecipeComponent,
  },
],
...canActivate(redirectUnauthorizedToLogin),
},
{
path: '**',
redirectTo: '',
pathMatch: 'full',
},
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})

export class AppRoutingModule {}

AuthModule:

@NgModule({
declarations: [
LoginFormComponent,
LoginPageComponent,
RegisterPageComponent,
ForgetPasswordComponent,
],
imports: [CommonModule, AuthRoutingModule, ReactiveFormsModule, FormsModule],
providers: [AuthService],
})

export class AuthModule {}

AuthRoutingModule:

const redirectLoggedInToHome = () => redirectLoggedInTo(['main']);

const routes: Routes = [
{
  path: '',
  component: LoginPageComponent,
  ...canActivate(redirectLoggedInToHome),
},
{
  path: 'login',
  component: LoginPageComponent,
},
{
  path: 'register',
  component: RegisterPageComponent,
},
{
  path: 'forget-password',
  component: ForgetPasswordComponent,
},
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})

export class AuthRoutingModule {}

UserModule:

@NgModule({
declarations: [DiscoverComponent, ProfileHeaderComponent],
imports: [CommonModule, UserRoutingModule],
exports: [DiscoverComponent, ProfileHeaderComponent],
}) 

export class UserModule {}

UserRoutingModule:

const routes: Routes = [
{
  path: 'discover',
  component: DiscoverComponent,
},
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})

export class UserRoutingModule {}

I export the components from the UserModule which would be used in other modules.

Once I serve the application the url response in the browser is:

http://localhost:4200/

And if I manually enter the path it keeps showing the same

http://localhost:4200/

Additionally I have removed both the guards and they didn't change anything so that isn't the issue either. Any help is appreciated.

Answer 1

appRoutingModule module is the beginning of the application, in that the root you are defining to contain the path main that is the issue. So you need to change it to.

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['']);

let routes: Routes = [
{
    path: '',
    component: MainComponent,
children: [
  {
    path: '',
    component: RecipesContainerComponent,
  },
 // rest of the code

This will not fix your issue entirely, but the blank screen is caused due to this!