A Programmer with Microsoft tools

So I have an Angular application – basically, a macro for your WebAPI – see https://ignatandrei.github.io/BlocklyAutomation/ . I want to transform into an Windows Application and have also deployed to Windows Store.

Attempt 1 : embed as a resource a .NET Core WebAPP and deploy to Windows Store. Not really –  the validation part of Store realizes this trick

Attempt2 : Electron – must rewrite window.prompt : https://github.com/electron/electron/issues/472

Attempt3 : Let’s see Blazor – https://github.com/dotnet/MobileBlazorBindings/  – however , it has just WPF, not UWP .

Attempt3: WebView2 –  https://github.com/MicrosoftEdge/WebView2Samples . It has an UWP. However, I realize that it does not have redirect … so routes in Angular will be difficult – if not intercepting 404 and serving the same index.html.

Attempt4: PWA : https://docs.microsoft.com/en-us/windows/uwp/publish/pwa/overview – yes, but my app it was Angular 12. Pass to 13 ( and force some unresolved dependencies ) take me the rest of the  day .

So I am at PWA now.

And Angular with https://www.pwabuilder.com/ is pretty impresive

What I do not have yet: ASP.NET Core downloading as Windows Store application with PWA and Controllers …

If you use an id for a HTML element inside your angular component and then use

document.getElementById

to retrieve it, bear in mind that someone can have multiple instances of your component on the same page. So here is a simple trick to deal with

1. In the HTML component put

<div [id]=”‘htmlOutput’+myId”></div>

2. In the ts file put

export class MyComponent{

static id:number=0;

myId:number=0;

constructor(/*arguments*/){

this.myId=++DisplayBlocklyComponent.id;

}

}

and for retrieving the HTML element

document.getElementById(‘htmlOutput’+this.myId)

That is all;