How to structure CRUD routes correctly in Angular projects?

Question

Question: Does exist a best practice for defining single-page applications' routes?

In Angular projects functionality is generally separated in lazy-loaded modules, then the routes are configured in both AppRoutingModule and the lazy loaded modules.

Let's say the app will manage catalogs, for example: products. The routes could be configured like this:

Option 1:

• List: /products
• Create: /products/create
• Read: /products/:id
• Update: /products/:id/edit

It works, but looks a bit messy and there is some ambiguity between /products/:id and /products/create because the parameter :id can match the string "create". Example code:

app-routing.module.ts:

const routes: Routes = [
    {
        path: '',
        children: [
            { path: 'products', loadChildren: 'app/products/products.module#ProductsModule' },
        ]
    }
];

products-routing.module.ts

const routes: Routes = [
    { path: '', component: ListProductsComponent },
    { path: 'create', component: CreateProductComponent },
    { path: ':id', component: ViewProductComponent },
    { path: ':id/edit', component: EditProductComponent },
];

Option 2

• List: /products
• Create: /products/create
• Read: /product/:id (notice "product" is singular)
• Update: /product/:id/edit (notice "product" is singular)

There is no ambiguity, but the configuration becomes messier:

app-routing.module.ts:

const routes: Routes = [
    {
        path: '',
        children: [
            // Empty path. It works as long as the ProductsModule has no empty paths. You can define more lazy modules like this.
            { path: '', loadChildren: 'app/products/products.module#ProductsModule' },
        ]
    }
];

products-routing.module.ts

const routes: Routes = [
    { path: 'products', component: ListProductsComponent },
    { path: 'products/create', component: CreateProductComponent },
    { path: 'product/:id', component: ViewProductComponent },
    { path: 'product/:id/edit', component: EditProductComponent },
];

As you can see, when defining routes you have to consider the structure of the lazy modules and the "beauty" of the URLs.

What is the best practice for defining routes, specially for CRUD operations? Is there a good name convention?

Answer 1

The only conventions/best-practices regarding Angular that I'm aware of come from the official Style guide, it doesn't mention anything about routes. But definitely a recommended/good read.

Personally I would put 'create' and 'edit' into another module with a different root url.

admin/product/list
admin/product/edit/:id
admin/product/create

Else I'd use a slightly modified version of your Option 1.

List: /products
Create: /products/create
Update: /products/edit/:id
Read: /products/:id

Clean and easy to read code > "beauty" of the URLs