Angular - how to load a component without the root component?

Question

I am working on a shopping web application project using angular 8.

There is a shop url and cms(Content Management system) for the admin.

I want CMS module to be loaded when I navigate to 'localhost:4200/cms'.

Can this be implemented? Following is my code.

//******* app.component.html *********/
<app-header></app-header>
<main role="main">
  <router-outlet (message)="handleMessage($event)"></router-outlet>
</main>
<footer class="text-muted">
  <app-footer></app-footer>
</footer>


//******* app-routing.module.ts *********/

const routes: Routes = [
  {path: '',                        component:MainComponent, pathMatch:'full'},
  {path: 'cart',                    component: CartComponent},
  {path: 'shop/:product_category',  component:ProductCategoryComponent},
  {path: 'cms', loadChildren: ()=> import ('./cms/cms.module').then(mod=>mod.CmsModule)},
  {path: '**',                      component:NotFoundComponent}
];

//******* cms-routing.module.ts *********/
const routes: Routes = [
  {path: '', component:CmsComponent, children:[
    {path: '', redirectTo: 'cms'},
    {path: 'product-categories', component:ProductCategoriesComponent},
    {path: 'product-categories/create', component: CreateProductCategoryComponent},
    {path: 'product-categories/edit/:id', component: EditProductCateogryComponent},
    {path: 'products', component: ProductsComponent},
    {path: 'products/create', component: CreateProductComponent},
    {path: 'orders', component: OrdersComponent},
  ]},
];

Answer 1

I do't think you can do that as Angular requires the app root so it knows where to render the content.

Not sure if named router outlets would match what you need.

Answer 2

As per my understanding, In angular structure components are the basic building block of an angular app so there is always one or more than one component in the angular application.

It means we need at least one angular component to render the angular app. and app.component is a root component so we have to use app.component(app-root) to render any angular application.

if your cms is a different app from angular then you can manage this by using angular RedirectGuard: refere