# How to add subcomponent and submodules to a C8Y component

**URL:** <https://community.cumulocity.com/t/how-to-add-subcomponent-and-submodules-to-a-c8y-component/3116>\
**Category:** Forum\
**Tags:** cumulocity\
**Created:** [October 6, 2023, 1:20pm UTC](https://community.cumulocity.com/t/how-to-add-subcomponent-and-submodules-to-a-c8y-component/3116 "2023-10-06T13:20:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![luclib](https://avatars.discourse-cdn.com/v4/letter/l/b5a626/32.png) [@luclib](https://community.cumulocity.com/u/luclib)\
**Post date:** [October 6, 2023, 1:20pm UTC](https://community.cumulocity.com/t/how-to-add-subcomponent-and-submodules-to-a-c8y-component/3116/1 "2023-10-06T13:20:17Z")

</div>

I have created an application using the latest version of the C8Y CLI, `1017.0.345`, and the `application` template following steps in the [Web SDK guide](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-2-create-your-first-component/5569).

Right now, the application consists of a single component called `errors-dashboard` that is hooked to the `app-module.ts` file using the NavigatorNode and NavagatorNodeFactory from the `c8y/ngx-components` package.

In addition, I have added a subcomponent called `errors-distribution` that is rendered within the `errors-dashboard` template as follows:

```auto
<c8y-title>Novanta Webportal - Error Dashboards</c8y-title>
<c8y-errors-distribution></c8y-errors-distribution>

[. . .]

```

I want to create a module out of my subcomponent so that I can import all of the module’s elements into the parent module with a single `import` statement, especially since I intend to add other subcomponents to the parent component.

Here is the module for my subcomponent: `ErrorsDistributionModule`

```auto
import { NgModule } from "@angular/core";

import { ErrorsDistributionComponent} from "./errors-distribution.component"
import { ErrorsDistributionService} from "./errors-distribution.service"

@NgModule({
    declarations: [ErrorsDistributionComponent],
    providers: [ErrorsDistributionService],
    exports: [ErrorsDistributionComponent]
})
export class ErrorsDistributionModule { }

```

And here I try to import it to its parent module:

```auto
import { NgModule} from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { CoreModule, hookNavigator } from "@c8y/ngx-components";

import { ErrorsDashboardComponent } from "./errors-dashboard.component";
import { ErrorsDashboardNavigationFactory } from "./errors-dashboard.factory";
import { ErrorsDistributionModule } from "./errors-distribution/errors-distribution.module";

const routes: Routes = [
    {
      path: '',
      redirectTo: 'errors-dashboard',
      pathMatch: 'full',
    },
    {
      path: 'errors-dashboard',
      component: ErrorsDashboardComponent,
      children: [
        {
          path: 'errors-distribution',
          component: ErrorsDistributionComponent
        }
      ]
    },
  ];

@NgModule({
    imports: [RouterModule.forChild(routes), CoreModule, ErrorsDistributionModule],
    providers:[hookNavigator(ErrorsDashboardNavigationFactory)],
    exports:[],
    declarations: [ErrorsDashboardComponent],
})
export class ErrorsDashboardModule { }

```

I want to include it into a new Angular routes object that I created to be able to display different components, i.e. dashboards, in the same component. Unfortunately, the `ErrorsDistributionComponent` reference in my `routes` object becomes underlined with the following message:

```auto
Cannot find name 'ErrorsDistributionComponent'.ts(2304)

```

Then, it recommends me to directly import the `ErrorsDistributionComponent` into my module.

Consequently, I have the following question: shouldn’t the child component be included in the import statement of its containing module?

I thought adding a component in the `exports` property of an Angular module meant I would not have to import the same component in its own `import` statement in the parent module.

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [October 6, 2023, 4:05pm UTC](https://community.cumulocity.com/t/how-to-add-subcomponent-and-submodules-to-a-c8y-component/3116/2 "2023-10-06T16:05:19Z")

</div>

Hi Lucas,

with the export of `ErrorsDistributionComponent` in your `ErrorsDistributionModule` you are able to use this component in the template of your `ErrorsDashboardComponent`. If you however want to refer to a type/class you always need to import it.  
If you don’t want to import the `ErrorsDistributionComponent` in your `ErrorsDashboardModule`, you could move your `errors-distribution` route into the `ErrorsDistributionModule`.

Regards,  
Tristan

---

<div class="post-metadata">

**Author:** ![luclib](https://avatars.discourse-cdn.com/v4/letter/l/b5a626/32.png) [@luclib](https://community.cumulocity.com/u/luclib)\
**Post date:** [October 6, 2023, 6:24pm UTC](https://community.cumulocity.com/t/how-to-add-subcomponent-and-submodules-to-a-c8y-component/3116/3 "2023-10-06T18:24:46Z")

</div>

Hi Tristan,

If I do choose the latter, what would that look like in code? Would I still be able to switch between subcomponents via a navigation bar?

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [April 3, 2024, 6:25pm UTC](https://community.cumulocity.com/t/how-to-add-subcomponent-and-submodules-to-a-c8y-component/3116/4 "2024-04-03T18:25:19Z")

</div>

Closed on April 3, 2024, 6:25pm UTC

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.