Application Routing Issue

,
1

I am trying to configure my own routing for an Angular application that uses the C8Y Web SDK.

The application is made up of a CoreComponent that is intended to be displayed at all times while the application is running. It contains two custom components: a sidebar component that is anchored to the left side of the window, and a nav-path component anchored to the top of the page that displays a breadcrumb trail of the application being accessed at a given time.

The CoreComponent’s template is as follows

<div class="container">
    <app-sidebar></app-sidebar>
    <div class="main-content">
      <app-nav-path></app-nav-path>
      <div class="content">
        <router-outlet></router-outlet>
      </div>
    </div>
</div>

I have defined the routing for my application in my app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Routes, RouterModule} from "@angular/router";
import { 
  CoreModule as c8yCoreModule,
  BootstrapComponent as c8yBootstrapComponent
} from '@c8y/ngx-components';
import { CoreModule } from './core/core.module';
import { FeaturesModule } from './features/features.module';
import { CoreComponent } from './core/core.component';

const routes: Routes = [
  {
    path: '',
    component: CoreComponent,
    children: [
      { 
        path: 'devices',
        loadComponent: () => import('../app/features/devices/devices.component').then((c) => c.DevicesComponent)
      }
    ]
  },
];

@NgModule({
  imports: [
    BrowserAnimationsModule,
    RouterModule.forRoot(routes, { useHash: true}),
    c8yCoreModule.forRoot(),
    FeaturesModule,
    CoreModule],
  bootstrap: [c8yBootstrapComponent],
})
export class AppModule {}

Note: I am hiding both Cumulocity’s .navigator and .header components from the screen.

The main idea is that whatever feature component link is selected on the sidebar, its content will be displayed within the .content element.

image
image871×429 18.3 KB

Here’s an example of a link from the sidebar component:

  <li class="nav-item">
    <a class="nav-link" routerLink="/devices">
      <img src="assets/images/icons/devices-icon.svg" alt="devices" class="icon-devices">
      <span class="nav-text">Devices</span>
    </a>
  </li>

image
image1099×521 20.5 KB

The issue I am having is that when I click on that link, both my sidebar and nav-path components disappear from the screen, and I am only left with the devices feature displaying on screen.

image
image1108×620 42 KB

When I consulted the source code using DevTools, I noticed something odd: there were two router-outlets being displayed on the page.

image

Why would there be two router-outlet’s displayed within my core component? Did I not configure the routing correctly?

2

Hi @luclib,

the bootstrap component that is provided as part of the Web SDK already includes a router outlet.
It is no problem to have nested router outlets.

I’ve built a small sample to showcases how this setup would work: Angular Routing Issue - StackBlitz

For what specific reason are you using the Web SDK, if your hiding the stuff it provides?

Regards,
Tristan

3

Hi Tristan,

Good question: the original plan was to use them both, but the designs from our UX designer kept changing, becoming more sophisticated, and we concluded that it would be very difficult, if not impossible, to configure the navigator to look and behave the way it is currently doing.

Regardless of the design, we will still need the SDK to access Cumulocity’s API to, for example, access the devices registered on our tenant.