Difference between a page component and smartcomponent Angular

Question

I just finished reading an article about the recommended folder structure in an Angular project. The part about the feature modules caught my attention because it recommended to include a "top component" inside the feature module, like this:

-FeatureModule
-->components
-->pages
-->models
-->services
-->topcomponent.ts/html/css

The articule suggests that the subcomponents descend from this component so my question is about the use of this component, because I usually use a page component as a container and "smartcomponent" .

I am doing wrong using page components this way? should the page components descend from this component through the component's routing system? thank you

Answer 1

Sometimes you might want to have a toolbar available for all the component that are rendered inside the feature module. To solve this we create a top component (wrapper component) which contains only the toolbar and the router-outlet. This is a good reason to use a top-component.

Top Component HTML

<app-feature-toolbar/>
<router-outlet/>

In the future there might be a requirement to achieve this, so for safety reasons we can easily accomodate such changes.

Feature Routing

export const routes: Routes = [{
    path: '',
    component: TopComponent,
    children: [{
        path: 'child'
        component: ChildComponent,
    }],
}]

But again, this is a personal preference. If you do not see the possibility of any requirements of sharing some html among all the feature components, then just route them directly without the top component.

export const routes: Routes = [
    {
        path: 'child'
        component: ChildComponent,
    },
    ...
]