Angular routing and project structure

Hi

The task is to improve the routing in the project.
Adding two menus depending on whether the user is on the front or in the panel.
The name and structure of the project should be kept as is.
Components should load asynchronously after entering the appropriate url.
The menu can be written as normal html links. No css formatting.

Url site: Component in project:
/t -> is to direct to /components/t
/ -> is to direct to /modules/front/components/home
/home -> is to direct to /modules/front/components/home
/test-page -> is to direct to /modules/front/components/test-page

/panel-> is to direct to /modules/panel/components/author
/panel/author-> is to direct to /modules/panel/components/author
/panel/book-> is to direct to /modules/panel/components/book
/panel/category-> is to direct to /modules/panel/components/category

Menu 1:
Home, T, Panel

Menu 2:
Front, Author, Book, Category

Adding services to api connections.
One main where SITE_URL = "http: // localhost: 12345" on loclalhost and SITE_URL = "http://site.com"

Separate CRUD APIs for each component + payload (object). Without creating a json token. Example:

C - (post) SITE_URL. "/ panel / author / create"
R - (get) SITE_URL. "/ panel / author / {id} / read"
U - (put) SITE_URL. "/ panel / author / {id} / update"
D - (delete) SITE_URL. "/ panel / author / {id} / delete"