Angular project integrated with symfony in one project
i have this routes access in symfony security.yaml

        - { path: ^/catalog, role: PUBLIC_ACCESS }
        - { path: ^/catalog/all, role: PUBLIC_ACCESS }
        - { path: ^/, role: [ ROLE_USER ] }

the angular route will be #/catalog/all

access for #/catalog and #/catalog/all should be public for unauthorized users (now it’s closed)

symfony routing can’t read # to control the access

Angular Routing:
app-routing.module.ts

const routes: Routes = [
    { path: '**', redirectTo: '/dashboard', data: { roles: [Role.Seller] } }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy', enableTracing: false })],
    exports: [RouterModule],
})
export class AppRoutingModule {
}

catalog-routing.module.ts

const routes: Routes = [
    {
        path    : 'catalog',
        component: ProductCatalogComponent,
        children: [
            { path: '', redirectTo: 'all', pathMatch: 'full' },
            { path: 'all', component: ProductsComponent },
        ]
    },
];

Symfony Routing:

catalog:
    controller: AppModuleCatalogInfrastructureHTTPControllerCatalogRedirectAction
    methods: [ GET ]
    path: /catalog/{productId}
    defaults: { productId: null }
    requirements:
        resourceId: 'd?'

How can i solve it?
Notes:

1. I can’t open routes to public for all endpoints
2. Server can’t understand #