“Possibly unhandled rejection” when closing ngDialog

 
 

Found my solution at: https://github.com/angular/material/issues/10369

When using the openConfirm function use:

TypeScript:

ngDialog

.openConfirm(dialogOptions)

.catch(function dialogCloseErrorCallback(reason: any) {

        // ngDialog v1.4.0 throws an exception, when closing the dialog with reason “undefined”.

        // Prevent this error:

    if (reason !== undefined) {

        throw
new Error(`Error when closing the dialog: [${reason}].`);

    }

});

 

When using open, use:

 

const openResult = self.ngDialog.open(dialogOptions);

if (openResult.closePromise) {

    openResult.closePromise.catch(function dialogCloseErrorCallback(reason: any) {

            // ngDialog v1.4.0 throws an exception, when closing the dialog with reason “undefined”.

           // Prevent this error:

        if (reason !== undefined) {

            throw
new Error(`Error when closing the dialog: [${reason}].`);

        }

    });

}

Allow *.css, *.js and *.html from the MVC 5 Views map

 

If you want to allow static content to be served from the asp .net MVC 5 views folder, just added the web.config in this folder and change path=”*” to path=”*.cshtml”.

https://stackoverflow.com/questions/17949460/how-do-you-request-static-html-files-under-the-views-folder-in-asp-net-mvc

 

<system.webServer>

<handlers>

<remove
name=BlockViewHandler/>

<add
name=BlockViewHandler
path=*.cshtml
verb=*
preCondition=integratedMode
type=System.Web.HttpNotFoundHandler />

</handlers>

</system.webServer>

Fix: TypeScript error Module ‘…’ has no default export

 

When I compiled my TypeScript project I got the error: [ts] Module ‘”c:/dev/am/common/element/after-visible”‘ has not default export:

 

This was caused by the fact, that I forgot to surround “afterVisible” with “{ }”.

The contents of the after-visible.ts module was:

 

/**

* Check the DOM repeatedly to see if the given element is visible, when element is visible call given function.

*/

export
function afterVisible(selector: string, fn: (element?: HTMLElement) => void, interval: number = 10, retryCount: number = 30): void {


const element = <HTMLElement>document.querySelector(selector);


if (element) {


const elementIsVisible = element.offsetWidth > 0 && element.offsetHeight > 0;


if (elementIsVisible) {

fn(element);


return;

}

}

 

setTimeout(function afterVisibleSetTimeoutElapsed() {


if (retryCount === 0) {


if (console) {

console.log(`Element ‘${selector}‘ does not exist or was not visible.`);

}

} else {


// Try again

afterVisible(selector, fn, retryCount – 1, interval);

}

}, interval);

}

 

 

So when you want to use the function afterVisible in an other function you will have to import it like so:

 

import { afterVisible } from
“./after-visible”;

 

function focus(element: HTMLElement) {

element.focus();

}

 

/**

* Check the DOM repeatedly to see if the given element is visible, when element is visible focus it.

*/

export
function focusAfterVisible(selector: string, interval: number = 10, retryCount: number = 30): void {

afterVisible(selector, focus, interval, retryCount);

}