How to add subcomponent and submodules to a C8Y component

[luclib (Lucas Liberman)]

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.

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:

<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

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:

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:

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.

[Tristan_Bastian]

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

[luclib (Lucas Liberman)]

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?