How to access Angular 16 routes independently for standalone components

Question

Update

The problem seems to be appearing with Angular 16 standalone components since there is no ngModule. To be specific, when the i run ng build the files are generated. Now i run the index.html file on vscode live server which opens the default route (http://127.0.0.1:5500/).

If i go to http://127.0.0.1:5500/search by typing in search bar. It doesn't work. or if i open this link in incognito tab. So what modification should i do to access it independently.

Reference code - Code

Old question

I have ecom website where I'm serving two different ui versions for large and small devices. I am able to do that using angular routing file. I can access search route by localhost:4200/search in development mode.

When i do ng build the search route is not accessible.

FYI -

Using angular 16 standalone components
Tried using pathMatch:'full'
Reason for having all components as children for MainComponent - MainComponent has header and footer common for all pages.

import { Routes } from '@angular/router';

export const routes: Routes = [];

export function getRoutes(): Routes {
  // if (window.innerWidth < 768) {
  //   return [
  //     {
  //       path: '',
  //       loadComponent: () => import('./components/small/home/home.component').then(mod => mod.HomeComponent),
  //     },
  //     {
  //       path: 'profile',
  //       loadComponent: () => import('./components/small/profile/profile.component').then(mod => mod.ProfileComponent),
  //     },
  //     {
  //       path: 'wishlist',
  //       loadComponent: () => import('./components/small/cart/cart.component').then(mod => mod.CartComponent),
  //     },
  //     {
  //       path: 'cart',
  //       loadComponent: () => import('./components/small/wishlist/wishlist.component').then(mod => mod.WishlistComponent),
  //     }
  //   ];
  // }
  // else {
    return [
      {
        path: '',
        loadComponent: () => import('./components/large/main/main.component').then(mod => mod.MainComponent),
        children: [
          {
            path: '',
            loadComponent: () => import('./components/large/home/home.component').then(mod => mod.HomeComponent),
          },
          {
            path: 'search',
            loadComponent: () => import('./components/large/search/search.component').then(mod => mod.SearchComponent),
          },
          {
            path: 'profile',
            loadComponent: () => import('./components/large/profile/profile.component').then(mod => mod.ProfileComponent),
          },
          {
            path: 'wishlist',
            loadComponent: () => import('./components/large/wishlist/wishlist.component').then(mod => mod.WishlistComponent),
          },
          {
            path: 'cart',
            loadComponent: () => import('./components/large/cart/cart.component').then(mod => mod.CartComponent),
          }
        ]
      }
    ];
  // }
}

The question has been resolved. I have imported withHashLocation to solve the issue. — Suyash Jawale, Jul 01 '23 at 06:11

score 0 · Answer 1 · answered Jun 29 '23 at 05:48

Angular performs route matching sequentially. If the first route in a route in a routes array matches, it will stop looping through the array. In your case it seems like angular found a match for path: '' and therefore doesn't continue to find matching routes (e.g. the search route).

In your case it first of all seems a little odd that you are splitting routes for different viewport sizes, but that's a whole different topic.

Another strange thing is that you always want to show the MainComponent as a wrapper, so you should probably exclude this component from routes configuration completely and use it as a wrapper for router-outlet, like:

<app-main-component>
  <router-outlet />
<app-main-component>

In this case you would only have one routing level (including pathMatch: 'full'):

return [
  {
    path: '',
    pathMatch: 'full',
    loadComponent: () => import('./components/large/home/home.component').then(mod => mod.HomeComponent),
  },
  {
    path: 'search',
    loadComponent: () => import('./components/large/search/search.component').then(mod => mod.SearchComponent),
  },
...
         
];

This would result in angular matching the HomeComponent only if <HOST> is matched. If you access <HOST>/search, the home route would not match and angular will try matching your search route.

How to access Angular 16 routes independently for standalone components

1 Answers1