Angular Routing: Angular redirects back to the parent route whenever I refresh the page or manually type specific URL

Question

I have a CRM module where I defined my own CRM Routing Module as follows:

const routes: Routes = [
  {
    path: 'crm',
    component: CrmComponent,
    children: [
      { path: '', redirectTo: 'companies', pathMatch: 'full' },
      { path: 'companies', component: CompanyListComponent },
      { path: 'contacts', component: ContactListComponent },
      {
        path: 'companies/new',
        component: CompanyEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'contacts/new',
        component: ContactEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'companies/edit/:id',
        component: CompanyEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'contacts/edit/:id',
        component: ContactEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'companies/view/:id',
        component: CompanyComponent,
        children: [
          // { path: '', redirectTo: 'details', pathMatch: 'full' },
          { path: '', component: CompanyEditComponent },
          { path: 'documents', component: CompanyDocumentsComponent },
          {
            path: 'related-contacts',
            component: CompanyRelatedContactsComponent,
          },
        ],
      },
      {
        path: 'contacts/view/:id',
        component: ContactComponent,
        children: [
          { path: '', component: ContactEditComponent },
          {
            path: 'related-products',
            component: ContactRelatedProductsComponent,
          },
          {
            path: 'related-raw-materials',
            component: ContactRelatedRawMaterialsComponent,
          },
        ],
      },
    ],
  },
];

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

So whenever I try to manually write URL to view details of a particular company or a contact /crm/companies/view/123?viewDetails=true It redirects me back to /crm.

Same happens whenever I am on a child route and try to refresh it redirects me back to the /crm.

I tried changing the order of routes, however, it did not help. Thank you in advance!

Edit: Perhaps I did not structure my post correctly and left it to be a little insufficient, I have placed in all of those components and they load. However, If I try to manually type an address to a certain company or a contact it redirects me back to the CrmComponent (in this case root), same happens whenever I am in a child component and I reload the page, it just redirects me back and I do not know why

Edit: I have solved the problem, for anyone who might encounter it in the future, check that your tags that have either click listener or router link, do not have it both at the same time, even if the user does not click, for some reason the routing breaks between pages.

Answer 1

I have solved the problem, for anyone who might encounter it in the future, check that your tags that have either click listener or router link, do not have it both at the same time, even if the user does not click, for some reason the routing breaks between pages.