How many modules can be hooked in a single C8Y application

[luclib (Lucas Liberman)]

I have created a web application with c8y/cli using application as a scaffold. I have followed the Web Development tutorial to create two new modules each with their own custom components to display two different sets of dashboards: a live dashboard and dashboard for displaying errors and case counts.

Each dashboard holds its own component, factory, and module. The factory files for each are displayed below:

live-dashboard.factory.ts

import { Injectable } from '@angular/core';
import {NavigatorNode, NavigatorNodeFactory} from '@c8y/ngx-components';

@Injectable()
export class LiveDashboardFactory implements NavigatorNodeFactory {
    get () {
        return new NavigatorNode({
            label: 'Live Dashboard',
            icon: 'bar-chart',
            path: 'live-dashboard',
            priority: 100
        })
    }
}

cases-errors-dashboard.factory.ts

import { Injectable } from '@angular/core';
import {NavigatorNode, NavigatorNodeFactory} from '@c8y/ngx-components';

@Injectable()
export class CasesErrorsDashboardFactory implements NavigatorNodeFactory {
    get () {
        return new NavigatorNode({
            label: 'Cases & Errors',
            icon: 'bar-chart',
            path: 'cases-errors-dashboard',
            priority: 100
        })
    }
}

The modules for each make use of a Routes object from the @angular/router package. The difference being that the module of the live dashboard includes a path for redirecting the application to itself should the user remove the component path from the URL.

live-dashboard.module.ts

[ . . . ]
const routes: Routes = [
    {
        path: '',
        redirectTo: 'live-dashboard',
        pathMatch: 'full'
    },
    {
        path: 'live-dashboard',
        component: LiveDashboardComponent
    }
];
[ . . .]

As of now, the application displays both component names on the side navigation panel when I run the application locally through c8ycli server. However, only one of them, the live dashboard component, appears on screen.

When I click on the above component, the server returns a blank page.

Similarly, when I enter the path name of the cases and errors component into the URL, it returns a blank page as well.

Is the problem with one or both of my component modules? Would creating a separate module to handle rooting for the entire application be the solution?

[Tristan_Bastian]

Hi Lucas,

Please try to follow the IoT Forum rules & General Posting guidelines and use only labels/tags that are related to IoT/Cumulocity, I’ve removed the additional ones.
Also consider providing version information, that would usually be part of the post templates…

where is your route for the cases-errors-dashboard path defined?
Please also provide full code snippets for where you are using the routes array afterwards in your modules.

Within your main appModule, you can enable tracing for the RouterModule, this should provide you some more details related to routing in your browsers console.

import { RouterModule as ngRouterModule } from '@angular/router';
[...]
ngRouterModule.forRoot([], { enableTracing: true, useHash: true }),

Regards,
Tristan

[luclib (Lucas Liberman)]

Hi Tristan,

I have read through the rules for posting on the forums. The reason I might use excessive tags is because I am unsure sometimes when a question deals primarily with Cumulocity IoT Platform or whether it can be counted as web developer portal question. The difference is not too clear for me.

The routes for the errors and dashboard component are stored within its own module, the same for the routes of the live dashboard.

EDIT: My c8ycli version is 1016.0.324 and my Angular package versions are posted bellow:

I will take note of the version information next time I post.