CODEWITHSUNDEEP
angularangular2-routingjhipster
Jeya Balaji
Jeya Balaji

Reputation: 165

NavigationError subscriber is undefined

I am using jhipster 4.13.3 and angular 5

Generated jhipster project using online page, did a "jhipster import-jdl" command to generate entities. The app is running fine till this point.

Then I proceeded to add my business logic. I updated generated entities component.ts and html files. Also, added following code into navbar.component.html

    <li *jhiHasAnyAuthority="'ROLE_MANAGER'" ngbDropdown class="nav-item dropdown pointer" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="manager-menu">
            <span>
                <i class="fa fa-user-plus" aria-hidden="true"></i>
                <span>Manager</span>
            </span>
        </a>
        <ul class="dropdown-menu" ngbDropdownMenu>
            <li>
                <a class="dropdown-item" routerLink="task-group" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                    <i class="fa fa-fw fa-user" aria-hidden="true"></i>
                    <span>List of task groups</span>
                </a>
            </li>
        </ul>
    </li>

    <li *jhiHasAnyAuthority="['ROLE_MANAGER','ROLE_EDITOR','ROLE_TRANSCRIPT']" ngbDropdown class="nav-item dropdown pointer" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="my-task-menu">
            <span>
                <i class="fa fa-user-plus" aria-hidden="true"></i>
                <span>My tasks</span>
            </span>
        </a>
        <ul class="dropdown-menu" ngbDropdownMenu>
            <li>
                <a class="dropdown-item" routerLink="task" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                    <i class="fa fa-fw fa-user" aria-hidden="true"></i>
                    <span>List of tasks</span>
                </a>
            </li>
        </ul>
    </li>

Note that I didnot create any new routes. I am pointing to entities created routerLink.

Upon running the app, after few clicks, I get the following error. Error occurs after clicking the menu item I had created. I see only the header and footer in the screen.

Router Event: NavigationError platform-browser.js:380 NavigationError(id: 2, url: '/user-info', error: TypeError: subscriber is undefined) platform-browser.js:367 {…} error: TypeError: subscriber is undefined Stack trace: [object Object] id: 2 url: "/user-info" proto: Object { constructor: NavigationError(), toString: NavigationError.prototype.toString() }

Should I make the routing defitions 'global'? If so, how?

Any help in fixing the router issue is highly appreciated.

Upvotes: 1

Views: 581

Answers (1)

Jeya Balaji
Jeya Balaji

Reputation: 165

Mistake I made was, to create component and service classes directly under the entities dir or under any of the already generated entities. Later I updated the router with these new components. Probably this would have disoriented the router definitions.

As a fix, I created modules and placed components, service under them. Here is the notes I prepared for myself.

  • ng g m new-module --routing
  • Add components, service and other artifacts in the new dir
  • Export the components in the index.ts file
  • Add SharedModule and Service to new-module.module.ts
  • Add routes to the new-module-routing.module.ts
  • Write ResolvePagingParams in routing module. (see sample in generated entity)
  • Add NewModule to ../entity.module.ts
  • Update webapp\app\layouts\navbar\navbar.component.html

Upvotes: 1

Related Questions