The child routes in feature module routes is not working in angular 8 and going to page not found page

I have created a product module as a featured module and shift all child routes of the featured module in the product module from 'app-routing.module.ts'. I haven't added lazy loading yet. But after separating product routes the child routes are not working. The routes are redirecting to the pagenotfound routes.

app-routing.module.ts

const routes:Routes=[
  {path:'',redirectTo:'/home',pathMatch:'full'},
  {path:'home',component:HomeComponent},
  {path:'about',component:AboutComponent},
  {path:'product',component:ProductComponent},
  {path:'contact',component:ContactComponent},
  {path:'buy product',component:ParentComponent},
  {path:'view',component:ViewchildComponent},
  {path:"**", component:PageNotFoundComponent}
];
@NgModule({
  imports:[RouterModule.forRoot(routes,{ enableTracing: false })],
  exports:[RouterModule]

})

app.component.html

<nav mat-tab-nav-bar ngClass = "tabs">
  <a mat-tab-link routerLink="/home" routerLinkActive="active">Home</a>
  <a mat-tab-link routerLink="/about" routerLinkActive="active-link">About US</a>
  <a mat-tab-link routerLink="/product" routerLinkActive="active-link">Products</a>
  <a mat-tab-link routerLink="/contact" routerLinkActive="active-link">Contact Us</a>
  <a mat-tab-link routerLink="/buy product" routerLinkActive="active-link">Buy Product</a>
  <a mat-tab-link routerLink="/view" routerLinkActive="active-link">View Child</a>
  
</nav>  
 <router-outlet></router-outlet> 

product.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LatopComponent } from './latop/latop.component';
import { MobileComponent } from './mobile/mobile.component';
import { ComputerComponent } from './computer/computer.component';
import { MachineComponent } from './machine/machine.component';
 import {RouterModule, Routes} from '@angular/router';
import { ProductComponent } from './product.component';
import { MaterialModule } from '../material/material.module';

const proRoute:Routes=[ {path:'product',children:[
  {path:'',component:ProductComponent},
  {path:'laptop', component:LatopComponent},
  {path:'mobile',component:MobileComponent},
  {path:'computer',component:ComputerComponent},
  {path:'wahing machine',component:MachineComponent}
]}]

@NgModule({
  declarations: [ 
    ProductComponent,
    LatopComponent,
    MobileComponent,
    ComputerComponent,
    MachineComponent
    
  ],
  imports: [
    CommonModule,
   MaterialModule,
   RouterModule.forChild(proRoute)
    
  ]
  
})
export class ProductModule { }

product.component.html

<a routerLink='/laptop' mat-raised-button color="primary">Know Laptop</a>
<a routerLink='/mobile' mat-raised-button color="primary">Know Mobile</a>
<a routerLink='/computer' mat-raised-button color="primary">Know Computer</a>
<a routerLink='/wahing machine' mat-raised-button color="primary">Know Washing Machine</a>