[SupportRequest] Angular usage impossible as app-component does not get loaded, but only in webview (?)

[PhilippMDoerner]

Heyho, I've been wanting to play around with nimview while coding an Angular frontend and am running into a bit of trouble that I don't quite understand.

When debugging with the HTTP server, my project works exactly as expected. Angular components load normally and JS gets normally executed. When running it in webview mode (e.g. by using startDesktop or by using release mode) and only then does the application refuse to render anything that isn't in the initial index.html file.

Minimal example

• Download and install Angular cli (npm install -g @angular/cli)
• Create new project ('ng new', in my examples I choose to include routing and use scss )
• Add the following to index.html: <h1> Initial tag </h1>
• Remove the entire contents of app-component.html and instead put in there the following: <h1>App component heading</h1>
• Compile the project (npm run build)
• Copy-paste the contents of the <FRONTEND_PROJECT>/dist folder to your nimview project
• create main file of your project with the following code:

#nimproject/src/nimproject.nim
import nimview

nimview.startDesktop(indexHtmlFile = "<RELATIVE_PATH_TO_ANGULAR>/index.html, debug=true)

• compile and run the nim project (I use a nimble command for this:

#nimproject/nimproject.nimble
requires "nim >= 1.6.6"
requires "nimview >= 0.4.2"

task debug_run, "Build a release for debugging and run it":
  --run
  --threads:on
  --mm:orc
  --deepcopy:on
  --outdir:"."
  setCommand "c", "src/imagestable.nim"

Expected Outcome

The window that opens up should render the large text:

Initial tag
App component heading

Actual Outcome

The window only renders the tag directly written into the index.html file:

Initial tag

There is no error visible in the console, which is I guess where JS errors would be rendered if there were any(?).
Find below the only output on the terminal that compiled and run the nimview project:

Hint: gc: orc; threads: on; opt: none (DEBUG BUILD, `-d:release` generates faster code)
84421 lines; 2.019s; 222.352MiB peakmem; proj: src/imagestable; out: /home/philipp/dev/imagestable/imagestable [SuccessX]
Hint: /home/philipp/dev/imagestable/imagestable [Exec]
DEBUG Starting desktop with file url

I've been trying to debug this, but I'm failing to figure out where I can see the possible error here. Is the way webview works just completely incompatible with Angular for some reason?

[Marco Mengelkoch]

Hey! Thx for the very detailed description.
Seems that you are using linux with gtk, right?
Can you open the a debug console (F10?) and check the output?
Maybe there was an issue with babel. Sometimes, it was also necessary to enable the debug mode of gtk.

Unfortunately, issues like this were always hard to debug. On Windows, this was mostly due to the old IE rendering engine, which couldn't render new JS and also had issues with new CSS.

I didn't work on this project for some time. If I would start from scratch again, I would probably prefer Tauri & Rust.

[PhilippMDoerner]

My goal was mostly to write backend nim (as I vastly prefer it over Rust) and Tauri doesn't have nim-bindings and likely isn't going to have it from what I'm reading recently.

Yeah, I am using arch with the webkit2gtk package (which... should be correct ?).
Sadly F10 does not open up a console when opening a webview window, that's mostly why I'm so stuck as I seem to have no option to debug my JS in webviews.

[Marco Mengelkoch]

Sadly F10 does not open up a console when opening a webview window

:/
I have no idea why F10 doesn't work. I once had a debug console on ubuntu and assumed it would be the same on each linux.