子路径与角度2上的父路径相同，未显示子组件

Question

我有这样的代码

app.routes.ts

export const ROUTES: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: 'login', component: LoginComponent, pathMatch: 'full', data: { title: 'Login' } },
    { path: 'register', component: RegisterComponent, pathMatch: 'full', data: { title: 'Register' } },
    { path: 'forgot-password', component: ForgotPasswordComponent, pathMatch: 'full', data: { title: 'Forgot Password' } },
    { path: 'test', component: TestPopToasterComponent, pathMatch: 'full'}
];

app.module.ts

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        LoginComponent,
        RegisterComponent,
        ForgotPasswordComponent,
    ];
    imports: [
        RouterModule.forRoot(ROUTES, { useHash: false, preloadingStrategy: PreloadAllModules }),
        MainModule,
        //other module
    ];

main.routes.ts

export const routes = [
  { path: '', component: MainComponent, children: [
    { path: '', loadChildren: './homepage/homepage.module#HomepageModule' },
    { path: 'product/:slug', loadChildren: './product/product.module#ProductModule' },
    { path: 'static/:slug', loadChildren: './static/static.module#StaticModule' },
  ]},
];

main.module.ts

@NgModule({
    declarations: [
        MainComponent,
        HeaderComponent,
        FooterComponent
    ],
    imports: [
        RouterModule.forChild(routes),
        ProductModule,
        StaticModule,
        HomepageModule
    ]
})
export class MainModule {
    public static routes = routes;
 }

homepage.router.ts

export const routes = [
    { path: '', component: MainComponent, children: [
        { path: '', component: HomepageComponent }
    ]}
];

homepage.module.ts

@NgModule({
    declarations: [
        HomepageComponent,
        BannerComponent,
        BrandComponent
    ],
    imports: [
        RouterModule.forChild(routes),
        BrowserModule
    ]
})
export class HomepageModule {
    public static routes = routes;
}

product.module.ts

@NgModule({
    declarations: [
        ProductComponent
    ],
    imports: [
        RouterModule.forChild(routes)
    ]
})
export class ProductModule {
    public static routes = routes;
}

product.router.ts

export const routes = [
    { path: '', component: MainComponent, children: [
        { path: 'product/:slug', component: ProductComponent, data: { title: 'Product' } }
    ]}
];

static.module.ts

@NgModule({
    declarations: [
        StaticComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild(routes),
    ],
})
export class StaticModule {
    public static routes = routes;
}

static.router.ts

export const routes = [
    { path: '', component: MainComponent, children: [
        { path: 'static/:slug', component: StaticComponent,  pathMatch: 'full' },
    ]}
];

当我访问''时，它仅显示MainComponent

但是当我访问'product /：slug'＆'static /：slug'时，它显示MainComponent和子组件

我不知道为什么，你们能帮我吗？