Aurelia view model showing error after adding hyperlink tag

Question

I am using Aurelia Dialog Service for model pop up, when i use hyperlink tag inside view model (model popup), it is showing error as Message: Maximum call stack size exceeded

Here is the code:-

HomePage.ts

import { autoinject, observable,PLATFORM } from 'aurelia-framework'; 
import { DialogController, DialogService } from 'aurelia-dialog';
import { PreviewWorkbook } from './../../components/preview-workbook/preview- workbook';
@autoinject
   constructor(private _lg: AppLogger, private _dlgs: DialogService,
     ) {  }
public PreviewMenu(e: Event): void { 
    this._dlgs.open({
        viewModel:  PreviewWorkbook, model: Workbooks
    }).whenClosed(rsp => {
        this._lg.log("Preview Menu Cancelled");
    });
}

when i click on PreviewMenu() in homepage.html i am getting below error

PreviewWorkbook HTML page:-

<template>
<ux-dialog>
    <ux-dialog-header>
       Preview WorkBook
    </ux-dialog-header>
    <ux-dialog-body>
        <div repeat.for="workbook of workbooks">
            <a href="${workbook.Link}"> ${workbook.Name} </a>
        </div>          
    </ux-dialog-body>
    <ux-dialog-footer>
        <button class="btn btn-info" click.delegate="save()">Save</button>
        <button class="btn btn-default" click.delegate="cancel()">Cancel</button>
    </ux-dialog-footer>
</ux-dialog>

If i just use just ul,li to bind the values it is working fine.

Answer 1

Adding an anchor tag in dialog body causes infinite loop or Maximum call stack size exceeded.

Solution:

In HomePage.ts

I tried to modify the code by adding the below line in the constructor:

constructor(private controller: DialogController) {
PLATFORM.moduleName('./../../components/preview-workbook/preview-Workbook');
}

So in HomePage.ts

import { autoinject, observable,PLATFORM } from 'aurelia-framework'; 
import { DialogController, DialogService } from 'aurelia-dialog';
import { PreviewWorkbook } from './../../components/preview-workbook/preview-Workbook';
@autoinject
constructor(private _lg: AppLogger, private _dlgs: DialogService) {
PLATFORM.moduleName('./../../components/preview-workbook/preview-Workbook');
}
    public PreviewMenu(e: Event): void { 
    this._dlgs.open({
    viewModel:  PreviewWorkbook, model: Workbooks
}).whenClosed(rsp => {
    this._lg.log("Preview Menu Cancelled");
});
}