analogjs / analog

The fullstack meta-framework for Angular. Powered by Vite and Nitro
https://analogjs.org
MIT License
2.61k stars 251 forks source link

The ability to handle routes like :category/:topic without having to prefix with a parent path #359

Closed fireflysemantics closed 1 year ago

fireflysemantics commented 1 year ago

Which scope/s are relevant/related to the feature request?

create-analog

Information

Currently all dynamic routes in AnalogJS have to be in a parent folder or prefixed with a parent path.

Dynamic routes are defined by using the filename as the route path enclosed in square brackets. Dynamic routes must be placed inside a parent folder, or prefixed with a parent path and a period.

I have an app that defines a route like this:

  {
    path: ':category/:topic',
    component: TopicComponent,
    data: ROUTE_DATA,
    resolve: { topic: topicResolver },
    canActivate: [topicGuard]
  },

And it renders URLs like this:

https://developer.fireflysemantics.com/blogs/blogs--design--the-power-of-the-simplest-possible-example
https://developer.fireflysemantics.com/guides/guides--macos--mac-os-keyboard-shortcuts

And these routes are currently being statically rendered by Scully.

If I switch to AnalogJS, I'd have to create a component for each category even though they can all be handled by the same component:

Describe any alternatives/workarounds you're currently using

Currently using Scully.

I would be willing to submit a PR to fix this issue

brandonroberts commented 1 year ago

Similar to https://github.com/analogjs/analog/issues/273

You can define route paths as src/app/pages/[category].[topic].page.ts for the equivalent route.

fireflysemantics commented 1 year ago

Hi Brandon,

I also thought this would work:

You can define route paths as src/app/pages/[category].[topic].page.ts for the equivalent route.

So I tried it with this application:

https://github.com/fireflysemantics/analog-project/tree/main/src/app/pages

And if I enter the URL:

http://localhost:5173/blog/1234

It renders the right page. However if I try to match this route:

/[productId].[partid].page.ts

With a URL like:

http://localhost:5173/1234/1234

It reroutes to the error page. Thoughts?