# Fixing navigation with Angular routing and hookNavigators

**URL:** <https://community.cumulocity.com/t/fixing-navigation-with-angular-routing-and-hooknavigators/2170>\
**Category:** Forum\
**Tags:** cumulocity\
**Created:** [July 29, 2024, 8:53pm UTC](https://community.cumulocity.com/t/fixing-navigation-with-angular-routing-and-hooknavigators/2170 "2024-07-29T20:53:46Z")\
**Posts on this page:** 7\
**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:** [July 29, 2024, 8:53pm UTC](https://community.cumulocity.com/t/fixing-navigation-with-angular-routing-and-hooknavigators/2170/1 "2024-07-29T20:53:46Z")

</div>

Following-up from my previous-post, I was able to set up nested navigation nodes on my navigator as follows:

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

@Injectable()
export class CaseManagementFactory implements NavigatorNodeFactory {
    get(): NavigatorNode {
        const caseManagementNode = new NavigatorNode({
            label: 'Dashboard',
            icon: 'dashboard',
            path: 'case-management',
            priority: 30
        })

        const openCasesNode = new NavigatorNode({
            label: 'Open Cases',
            icon: 'table',
            path: 'case-management/open-cases',
            priority: 20
        });

        caseManagementNode.add(openCasesNode);
        
        return caseManagementNode;   
    }
}

```

I then import the factory into my component’s module as follows:

```js
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { hookNavigator } from '@c8y/ngx-components';

import { CaseManagementComponent } from './case-management.component';
import { CaseManagementFactory } from './case-management.factory';
import { OpenCasesComponent } from './open-cases/open-cases.component';
import { ActiveCasesComponent } from './active-cases/active-cases.component';

@NgModule({
  declarations: [CaseManagementComponent, OpenCasesComponent, ActiveCasesComponent],
  imports: [
    CommonModule
  ],
  exports: [CaseManagementComponent],
  providers: [hookNavigator(CaseManagementFactory)]
})
export class CaseManagementModule { }

```

**Result**

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/f/0/f01156e6d3adb170451d56c41ce430dcf113fe9f.png)

The difficulty I am facing now is trying to get the child component, **open-cases** , to appear in the main application space. This component should have the same default message as its parent component .

![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/2/d/2d0acbf08c4da05f3a412b591215a73c8e6b0ad7.png)

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/f/a/fadaccb0b514249e3e3c29bbe3a25d2e92dc6d6c.png)

Because I intend to add a header to my application, I have also created a routing module for the parent component (and module) **case-management** , and I wonder if there is a conflict between the routing module and the navigator node factory both sharing the **`path`** fields.

**CaseManagementRoutingModule**

```js
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CaseManagementComponent } from './case-management.component';
import { OpenCasesComponent } from './open-cases/open-cases.component';

const routes : Routes = [
    {
        path: '',
        component: CaseManagementComponent,
        children: [
            { path: 'open-cases', component: OpenCasesComponent}
        ]
    }
]

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class CaseManagementRoutingModule {}

```

**AppRoutingModule**

```js
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'case-management',
    loadChildren: () => import('./features/case-management/case-management-routing.module').then(m => m.CaseManagementRoutingModule)
  },
  { 
    path: '',
    redirectTo: 'case-management', 
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: false, useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

```

---

<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:** [July 29, 2024, 9:30pm UTC](https://community.cumulocity.com/t/fixing-navigation-with-angular-routing-and-hooknavigators/2170/2 "2024-07-29T21:30:08Z")

</div>

After some further investigation, I determined that the problem has nothing to do the NavigationNodeFactory but with how I am setting up the routing in my project.

Currently, I have imported the CaseManagementRoutingModule both to the AppRoutingModule _and_ the AppModule…

Then, I looked back at the [tutorial](https://cumulocity.com/docs/web/gettingstarted/) and noticed that the AppModule imports the RouterModule and provides with the `Routes` object itself.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/9/f/9ff9172a4e77eba3b9fa8aceb2efa946a2eb3a69.png)

I am confused as to why we I needed a AppRoutingModule in the first place when I added the Web SDK to our application…

I have since removed the AppRoutingModule from my project and it is working as it should be except for the error I reported at the start.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/d/2/d245e9ad53c4a287414ae137a63c2b8a55cb6b8f.png)

---

<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:** [July 30, 2024, 11:40am UTC](https://community.cumulocity.com/t/fixing-navigation-with-angular-routing-and-hooknavigators/2170/3 "2024-07-30T11:40:32Z")

</div>

Hi Lucas,

regarding your `CaseManagementFactory`, I would suggest to restructure it to:

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

@Injectable()
export class CaseManagementFactory implements NavigatorNodeFactory {
  rootNode: NavigatorNode;

  constructor() {
    this.rootNode = new NavigatorNode({
      label: 'Dashboard',
      icon: 'dashboard',
      path: 'case-management',
      priority: 30
    });

    const openCasesNode = new NavigatorNode({
      label: 'Open Cases',
      icon: 'table',
      path: 'case-management/open-cases',
      priority: 20
    });

    this.rootNode.add(openCasesNode);
  }

  get(): NavigatorNode {
    return this.rootNode;
  }
}

```

This way you would not recreate a new NavigatorNode with every call of `get()` as get is called after every navigation.

I did not really get the what exactly your problem is.  
You’ve mentioned:

> [@luclib](#):
>
> This component should have the same default message as its parent component .

And from the screenshot it looks like it is having exactly the same default message. Or did you expect a message like `open-cases works!` instead of `case-management works!`?

Since routing is not really any different within Cumulocitys Web SDK compared to a plain angular app, maybe you can just provide a stackblitz sample of your setup in a plain angular application?

You could also set `enableTracing` to `true` in your `RouterModule.forRoot()` call to get some debug information regarding routing logged on your console.

Regards,  
Tristan

---

<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:** [July 30, 2024, 12:35pm UTC](https://community.cumulocity.com/t/fixing-navigation-with-angular-routing-and-hooknavigators/2170/4 "2024-07-30T12:35:55Z")

</div>

Hi @luclib,

I’ve created a sample that should be working as you would expect it:

> **[Angular Cumulocity Web SDK Starter (case-management) - StackBlitz](https://stackblitz.com/edit/angular-c8y-case-management?file=package.json&initialpath=apps%2Fangular-c8y-starter)**
>
> To answer forum post here: https://tech.forums.softwareag.com/t/fixing-navigation-with-angular-routing-and-hooknavigators/298585

When opening the sample, note that you would need to click the link behind `Dev server running` in the terminal once.

Feel free to use [Angular Cumulocity Web SDK Starter - StackBlitz](https://stackblitz.com/edit/angular-c8y-starter?file=package.json&initialpath=apps/angular-c8y-starter) as a template for further questions related to the Web SDK.

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:** [July 30, 2024, 12:45pm UTC](https://community.cumulocity.com/t/fixing-navigation-with-angular-routing-and-hooknavigators/2170/5 "2024-07-30T12:45:11Z")

</div>

Thank you, Tristan. I will apply your suggestions and get back to you on the result 🙂

---

<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:** [July 30, 2024, 4:34pm UTC](https://community.cumulocity.com/t/fixing-navigation-with-angular-routing-and-hooknavigators/2170/6 "2024-07-30T16:34:16Z")

</div>

Hi @Tristan_Bastian

To clarify my first question: yes, when I click on the navigator node for open-cases it should display `open-cases works! ` on the screen.

Using `enableTracing: true` enabled me to get to the root of the problem: I had to switch all of my components to `standalone:true`, else they would not work with the lazy loading technique.

Vielen Danke!

---

<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:** [January 26, 2025, 4:34pm UTC](https://community.cumulocity.com/t/fixing-navigation-with-angular-routing-and-hooknavigators/2170/7 "2025-01-26T16:34:41Z")

</div>

Closed on January 26, 2025, 4:34pm UTC

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