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},
  ]},
];

Your code looks correct but you have one mistake: {path: '', redirectTo: 'cms'},. The path /cms/cms doesn't exist. And if it redirect to /cms you will have a loop — Gilsdav
– Gilsdav, Commented Sep 5, 2019 at 9:49

Dhaval · Accepted Answer · 2019-09-05 09:48:09Z

1

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

answered Sep 5, 2019 at 9:48

Dhaval

1,0001 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boris · Accepted Answer · 2019-09-05 09:35:05Z

0

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.

answered Sep 5, 2019 at 9:35

Boris

6412 gold badges9 silver badges30 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related