Unable to create URL with NavigationMixin.GenerateUrl

Question

LWC - HTML - PARENT

        <div class="slds-page-header__col-details">
            <ul class="slds-page-header__detail-row">
                <template if:true={hKeyFields}>
                    <template for:each={hKeyFields} for:item="field">
                        <li class="slds-page-header__detail-block" key={field.apiName}>
                            <div class="slds-text-title slds-truncate" title={field.label}>
                                <span>{field.label}</span>
                                <template if:true={field.object.inlineHelpText}>
                                    <lightning-helptext content={field.object.inlineHelpText}></lightning-helptext>
                                </template>
                            </div>
                            <template if:false={field.object.reference}>
                                <div class="slds-truncate" title={field.record.displayValue}>{field.record.displayValue}</div>
                            </template>
                            <template if:true={field.object.reference}>
                                <c-relationship-link target-object-api={field.reference.value.apiName} target-label={field.reference.displayValue} target-id={field.reference.value.id} ></c-hl-relationship-link>
                            </template>
                        </li>
                    </template>
                </template>
            </ul>
        </div>

LWC - HTML - CHILD

<template>
    <a href={url} onclick={viewRecord} title={targetLabel}>{targetLabel}</a>
</template>

LWC - JS - CHILD

import { LightningElement, api, track} from 'lwc'; 
import { NavigationMixin } from 'lightning/navigation';
export default class RelationshipLink extends NavigationMixin(LightningElement) {
    @api targetId;
    @api targetLabel;
    @api targetObjectApi;
    @track url;
    connectedCallback() {
        //LL20190513 - Generate URL for viewing record page
        this.relationshipRef = {
            type: 'standard__recordPage',
            attributes: {
                recordId: this.targetId,
                objectApiName: this.targetObjectApi,
                actionName: 'view'
            }
        };
        this[NavigationMixin.GenerateUrl](this.relationshipRef)
            .then((url) => {
                this.url = url;
            });
    }
    viewRecord(evt){
        evt.preventDefault();
        evt.stopPropagation();
        this[NavigationMixin.Navigate](this.relationshipRef);
    }
}

Following solutions mentioned below and no luck:

Lightning Web Component - Navigation - Show Link in a List / Table to Open Record solution posted by @glls

Also note the Chrome console shows this:

aura_proddebug.js:237 [LWC warning]: Invalid event type "WireContextEvent" dispatched in element . Event name should only contain lowercase alphanumeric characters.

Output HTML

Chrome Debug Isolated

Answer 1

The issue here seems to be that NavigationMixin didn't support 15-Id, only 18-Id.