Correct routing in angular application

You're asking two very different questions, which isn't ideal, but I'll try and help.

For the routing question, your 2nd routing table is better, but still isn't correct.

Using children for an empty path seems to defeat the purpose. You're also lazy loading HomeModule on a child route with an empty path. I'm pretty sure that doesn't work. If home.routing.ts actually contains child paths, just move this up to the top level as there's no need to lazy load those.

Try redoing it something like this:

const routes: Routes = [
    {
        path: '',
        component: MainLayoutComponent,
    },
    {
        path: 'home',   // pretending this is from home.module.ts
        component: HomeComponent,
    },
    {
        path: 'products',
        loadChildren: '../app/modules/products.module#ProductsModule'
    },
    {
        path: 'categories',
        loadChildren: '../app/modules/products.module#CategoriesModule'
    },
    {
        path: '**',
        redirectTo: '/404'
    }
];

This is much simpler and you'll have fewer issues getting everything up and running. I'd say it's generally a bad idea :mainCategoryId as a top level path unless you only have one type of thing. So putting them under categories/:mainCategory is going to be a lot easier to understand what's going on.

Now for your second question you wanted to know how to redirect to a 404 page if given an invalid category. Because we changed the route to categories/:mainCategory we don't need to worry about your /randomName/Drinks as it'll already go to the 404. For your other examples you have a couple ways to handle it.

Probably the simplest way would be to just check the params inside your ProductsComponent.

@Component({
    selector: 'products-component',
    templateUrl: './products-component.component.html',
    styleUrls: ['./products-component.component.scss'],
})
export class ProductsComponent {
    public category: string;
    public subCategory: string;

    constructor(private route: ActivatedRoute, private router: Router) {
        this.route.params.subscribe( params => {
            this.category = params['mainCategory'];
            this.subCategory = params['subCategory'];

            // validate categories in some way (either service, local method or something 
            if (!this.isCatValid(this.category) || !this.isCatValid(this.subCategory)) {
                this.router.navigate(['404']);
            }   
        }
    }

    this.isCatValid(category: string): boolean {
        // validate category
    }
}

Alternately if you create a categoryService that you can ensure pre-loads before any routes and has call resolves you could use add a CanActivate route guard to your categories routes. So your categories.routing.ts looks like this:

const routes: Routes = [
  {
    path: ':mainCategory',
    component: ProductsComponent,
    canActivate: [CanActivateCategories]
  },
  {
    path: ':mainCategory/:subCategory',
    component: ProductsComponent,
    canActivate: [CanActivateCategories]
  }
];

Then you just need to write a CanActivateCategories which validates the params and either returns true or if not valid just another this.router.navigate(['404']);