Relative routes are not automatically generated when creating a new entity

Question

When I create a new entity with the command \"jhipster entity [entityName]\", the relative paths are not automatically generated in my [entityName].route.ts.

Instead, at

Answer 1

In entity.module.ts, the routes to the entities get added in RouterModule.forChild(): all entities will be lazy loading.

This means the initial part of the JHipster-created Angular app loaded in a client (Browser) does not have all paths and all modules of the app. The one and only Angular Router-Object of an Angular application initially only knows the paths defined in RouterModule.forRoot() in app-routing.module.ts (which is imported as [AppName]AppRoutingModule] in app.module.ts) and navbar.route.ts (which is linked in app-routing.module.ts).

The entity.module.ts itself is imported as [AppName]EntityModule in app.module.ts and therefore its RouterModule.forChild()-entries are known to the Angular Router-Object right from app start in the client browser.

This way, the Angular Router-Object on the client will only know the paths and how to navigate to an implemented entity module (means: how to load the entities components on the screen of the SPA) if asked to and therefore will only in the case this entity gets visited "lazy load" the corresponding js-data from Webserver to client (Browser). Angular packages this data on transpilation in javascript chunks, so the corresponding additional data can be loaded separately.

In every JHipster webapp entity folder, you will find an [entity].route.ts, which gets imported by the corresponding [entity].module.ts.

So as soon as one of the entities components will be visited via path, the Angular Router-Object on the client gets further information (paths), how to load additional Angular components (a complete JHipster-created entity) with loadChildren in RouterModule.forChild.

These feature modules components templates will then be on path: '' (respectively path: ':id/view', path: ':id/edit', path: ':id/new') added to the root-path they came from: <base href="/" /> (from index.html) + ./[entity]/ (from entity.module.ts).

Together with the corresponding outlet name (if named), route guards and pageTitles as well as individual additional route parameters are also generated for the frontend Angular side of a JHipster App. JHipster at the moment generates two <router-outlet>s: one for the navbar at the top of the page (this is the named one) and the main <router-outlet>.