Angular 2 - Cannot match any routes for nested resource

Question

I am working with an Angular front end application scaffolded by the JHipster generator. This is connected to a microservice which is backed by Mongo. I'm dealing with a resource that contains a list of subobjects. Something like:

preferenceList: {
   preferences: [{name: "", type: "", setting: ""}] 
}

"Name" is guaranteed to be unique and I'm trying to create a routerLink that will generate a popup to view that particular preference document when it is clicked in a list view. However, I keep getting the error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'preference' Error: Cannot match any routes. URL Segment: 'preference' at ApplyRedirects.noMatchError (vendor.dll.js:73690)

I'm really not sure how to proceed. What might be causing this error:

Within my HTML, here's how I generate the button from preference-list-detail.component.html:

<button type="submit"
    [routerLink]="['/preference', { outlets: { popup: [preferenceList.id, 'edit', 'TSTCODE'] } } ]"
    replaceUrl="true"
    class="btn btn-primary btn-sm">
    <span class="fa fa-pencil"></span>
    <span class="hidden-md-down">Edit</span></button>

Here's the relevant code from my routing file:

@Injectable()
export class PreferenceResolvePagingParams implements Resolve<any> {

    constructor(private paginationUtil: PaginationUtil) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const page = route.queryParams['page'] ? route.queryParams['page'] : '1';
        const sort = route.queryParams['sort'] ? route.queryParams['sort'] : 'id,asc';
        return {
            page: this.paginationUtil.parsePage(page),
            predicate: this.paginationUtil.parsePredicate(sort),
            ascending: this.paginationUtil.parseAscending(sort)
      };
    }
}

export const PreferenceRoute: Routes = [
    {
        path: 'preference',
        component: PreferenceComponent,
        resolve: {
            'pagingParams': PreferenceResolvePagingParams
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'Preferences'
        },
        canActivate: [UserRouteAccessService]
    }
];

export const PreferencePopupRoute: Routes = [
    {
        path: 'preference-new',
        component: PreferencePopupComponent,
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'Preferences'
        },
        canActivate: [UserRouteAccessService],
        outlet: 'popup'
    },
    {
        path: 'preference/:id',
        component: PreferencePopupComponent,
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'Preferences'
        },
        canActivate: [UserRouteAccessService],
        outlet: 'popup'
    }
];

I am linking from a resource in one package to a different resource in another package (that is, preferenceList to preference). I have experimented with a few different things in routerLink, including not using Named Routers, but to no avail.

Answer 1

As I am still new to Angular I am really not sure of the particulars yet, but I believe this issue was related to my attempt to utilize a route defined in another package (utilized by a different module). I think JHipster has these routes defined so that they cannot be used by other entity modules.

I decided to create a route inside of my PreferenceList module's routing file and link to the desired components that way.