Angular routes not working as expected for imported module

Question

Edit: Changing forums-routing.module.ts from { path: '', component: ForumsComponent } to { path: 'forums', component: ForumsComponent } made the routing work as expected, but it doesn't make sense to me why I needed to specify this. If this module were to work as a completely standalone module, I would want it to direct at /, not /forums, then when including it as a module, choose which route routes here, instead of being forced to use "forums"

I am pretty new to angular. I am trying to create a sub-module in my application, a forums module. I basically want to have the routes look like this:

• /
  • Home
• /forums
  • Forums main page (will display forum categories)
• /forums/:category
  • Will display the posts in a specified category
• /forums/:category/new
  • Will open to a new post component, to be made within the specified category
• /forums/:category/:postId
  • Will open a specific post within a specified category

However, somehow my routing is ignoring the routing in my app-routing.module, and skipping directly to my forums-routing.module. (so localhost/ leads me to forums, localhost/categoryId leads to that category detail, etc). I am following how I learned in "The Complete guide to Angular 2" on Udemy & the app that he creates in that course, but even though it seems like I am doing everything the same, it is somehow coming out wrong.

I feel as though I am missing some small detail... anyways, I have set up my modules like this

app-routing-module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ForumsComponent } from './forums/forums.component';

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'forums', component: ForumsComponent }
];

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

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { ForumsModule } from './forums/forums.module';
import { HomeComponent } from './home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    ForumsModule,
    AppRoutingModule
  ],
  providers: [UsersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

forums-routing-module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ForumsComponent } from './forums.component';
import { CategoryDetailComponent } from './categories/category-detail/category-detail.component';
import { PostDetailComponent } from './posts/post-detail/post-detail.component';
import { NewPostComponent } from './posts/new-post/new-post.component';
import { CategoryGroupComponent } from './categories/category-group/category-group.component';

const forumsRoutes: Routes = [
    { path: '', component: ForumsComponent, children: [
        { path: '', component: CategoryGroupComponent },
        { path: ':category', component: CategoryDetailComponent },
        { path: ':category/new', component: NewPostComponent },
        { path: ':category/:postId', component: PostDetailComponent }
    ]},
];

@NgModule({
    imports: [RouterModule.forChild(forumsRoutes)],
    exports: [RouterModule]
})
export class ForumsRoutingModule { }

forums.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ForumsComponent } from './forums.component';
import { CategoryGroupComponent } from './categories/category-group/category-group.component';
import { CategoryItemComponent } from './categories/category-item/category-item.component';
import { PostDetailComponent } from './posts/post-detail/post-detail.component';
import { CategoryDetailComponent } from './categories/category-detail/category-detail.component';
import { PostReplyComponent } from './posts/post-detail/post-reply/post-reply.component';
import { PostItemComponent } from './posts/post-item/post-item.component';
import { NewPostComponent } from './posts/new-post/new-post.component';
import { ForumsRoutingModule } from './forums-routing.module';

@NgModule({
  declarations: [
    ForumsComponent,
    CategoryGroupComponent,
    CategoryItemComponent,
    CategoryDetailComponent,
    PostDetailComponent,
    PostReplyComponent,
    PostItemComponent,
    NewPostComponent
  ],
  imports: [
    CommonModule,
    ForumsRoutingModule
  ]
})
export class ForumsModule { }

app.component:

<div class="content">
  <div class="container-fluid">
    <router-outlet></router-outlet>
  </div>
</div>

and finally forums.component:

<p>
  forums works!
  <router-outlet></router-outlet>
</p>

Answer 1

Your app-routing.module.ts should load the ForumsModule not the ForumsComponent

app-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'forums', loadChildren: './forums/forums.module#ForumsModule' }
];

The app.module does not need to import ForumsModule as this will be lazy loaded

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [UsersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

The forums-routing.module.ts paths inherit the path forums from app-routing. You should be able to use an empty path. But there is an issue with having multiple empty paths. The route to FourmsComponent and CategoryGroupComponent resolve to the same path /forums. You could do something like the routing below.

forums-routing.module.ts

const forumsRoutes: Routes = [
    { path: '', component: ForumsComponent, children: [
        { path: 'category', component: CategoryGroupComponent, children: [
            { path: ':category', component: CategoryDetailComponent },
            { path: ':category/new', component: NewPostComponent },
            { path: ':category/:postId', component: PostDetailComponent }
        ]}
    ]},
];

This will give you the following paths for forums-routing.module.ts

/forums                        (ForumsComponent)
/forums/category               (CategoryGroupComponent)
/forums/category/:id           (CategoryDetailComponent)
/forums/category/:id/new       (NewPostComponent)
/forums/category/:id/:postId   (PostDetailsComponent) <- not sure if this works you'll have to try it.

https://angular.io/guide/lazy-loading-ngmodules