[FEAT]: Add file-based routing

[brandonroberts]

There are multiple options here, but the goal is to define a "routes" folder where each file is a route and you can build a nested hierarchy of routes based on the file system.

There are vite plugins that can do this already, such as vite-plugin-pages but it would need some customization

The underlying routing system could be based on the Angular Router or Remix Router.

With the Angular Router, its harder to generate an entire route configuration due to guards, resolvers, route data, and so on. We could look at defining some sort of exported config in the route file that provides extra metadata that gets merged into the route config if this is the path we take.

In the future, we'd have some server-side element similar to getStaticProps where server-side code is defined next to the component but not shipped to the browser.

[brandonroberts]

Another note for the Angular Router is that as it supports guards as plain functions now, we could generate guards in the configuration that connect to the API defined inside the route component. Not sure how we would collect and run these on the server side though to re-hydrate the route data

[brandonroberts]

Tracking some ideas for folder/file structure. As Angular does not have its own file format, such as .ng we still need some way to differentiate files used for generating routes. One proposed idea is to use .route.ts as an identifier for file-based routes. Screenshot below of potential structure

Which would produce the following route structure.

export const routes = [
  {
    path: 'cart',
    children: [
      {
        path: '',
        loadComponent: () =>
          import('/app/pages/cart/index.route.ts').then((m) => m.default),
        pathMatch: 'full',
      },
    ],
  },
  {
    path: 'products',
    loadComponent: () =>
      import('/app/pages/products.route.ts').then((m) => m.default),
    children: [
      {
        path: ':productId',
        loadComponent: () =>
          import('/app/pages/products/[productId].route.ts').then(
            (m) => m.default
          ),
      },
    ],
  },
  {
    path: 'shipping',
    children: [
      {
        path: '',
        loadComponent: () =>
          import('/app/pages/shipping/index.route.ts').then((m) => m.default),
        pathMatch: 'full',
      },
    ],
  },
  {
    path: 'about',
    loadComponent: () =>
      import('/app/pages/about.route.ts').then((m) => m.default),
  },
  {
    path: 'home',
    loadComponent: () =>
      import('/app/pages/home.route.ts').then((m) => m.default),
  },
  {
    path: '',
    loadComponent: () =>
      import('/app/pages/index.route.ts').then((m) => m.default),
    pathMatch: 'full',
  },
  {
    path: '**',
    loadComponent: () =>
      import('/app/pages/[...404].route.ts').then((m) => m.default),
  },
];

[brandonroberts]

Put together a prototype based on the generouted project

https://github.com/brandonroberts/angular-analog-file-routing

Have to use a separate file for additional route config so we can still lazy load the components themselves.