[Fixed] I am new to angular and I want to load the nested component to the module with one component default. Is it possible to create this in angular?

Issue

My application structure is as follow:

-app
 -Home(module)
   -index(component)
     -index.component.html
     -....
   -home-routing.module.ts
   -home.component.html
   -home.component.scss
   -home.component.spec.ts
   -home.component.ts
   -home.module.ts
   
 -Shared(Module)
  -components
   -headercomponent ...
   -footercomponent...

I have assigned default address as ” in routing to route home/index component by default. But the informations of home.component.html (from home module) are not displayed. I want to render components of home along with its information.
By routing to index it only renders the information from index component i.e. home module information is not displayed.

I want output like this.
How is it possible?

Sample : https://github.com/sundaracharya/astrohimalaya.git

Solution

There is no identifier for index component to render the home component’s content you have to use the Home component either as a selector inside the index component or use a router outlet and route manually from ts file by injecting Router.