Open Angular Framework in HtmlDialog

Developers Ruby API
, , ,
1

There are any config to open angular framework version 16 or later pages into sketchup version 18, using HtmlDialog. The current page, is opened blank

example test:

  • dialog = UI::HtmlDialog.new(
    dialog_title: “Dialog Example”,
    preferences_key: “my_name_my_extension_my_dialog”,
    style: UI::HtmlDialog::STYLE_DIALOG
    )
    dialog.set_url("
    http://localhost:4200"))
    dialog.show

image
image1493×777 63 KB

image
image1038×705 6.48 KB

2

Since SU 2017, one can right-click in HtmlDialog windows and you should see an option ‘Show DevTools’, similar to Dev Tools in Chrome/Edge. Have you done that, and are there any JS errors shown? I assume a stand-alone browser does work?

In the docs for HtmlDialog, it shows the following:

CEF         SU
Vers      Version
88        2021.1
64        2019.0
56        2018.0
52        2017.0

The info above may lead you to what version of js/ECMA script is being used. ‘CEF’ is short for
‘Chromium Embedded Framework’.

I haven’t used Angular, and whether it would be efficient to do so with SU, not sure.

EDIT: This may be a CORS issue, but Dev Tools should show if that’s the case.

3

When my system is running locally, no error appears in the console

image
image1130×557 16.6 KB

but when I open it using the URL that is hosted, it opens but breaks the styles

image
image942×712 44.5 KB

4

Bruno,

Thanks. Sorry, I’m still a bit confused. You’ve mentioned running locally (localhost?) and running hosted with a UI::HtmlDialog.

Does a stand-alone browser (Chrome, Edge, Firefox, Safari, etc) work correctly with both?

Do you know of any web sites running with Angular? I tried the following in SU 2017, and it seemed to load correctly. I would assume that Angular’s web site is built using Angular, but not sure…

dlg = UI::HtmlDialog.new(
  dialog_title: 'Dialog Example',
  width: 1200,
  height: 1200
)
dlg.set_url "https://angularjs.org/"
dlg.center
dlg.show
5

Yes, that’s pretty much it.

The link you provided is for the first version of Angular, known as AngularJS, which is not commonly used nowadays. A new framework was created called Angular, also known as Angular 2.
Web systems built using Angular 2 may not behave well in SketchUp 2018, and I believe it might be due to the CEF (Chromium Embedded Framework).
Link to Angular 2: https://angular.io/

Since I already have a web system created using Angular 2, I would like to use it to interact with the SketchUp API within SketchUp. I think this may not be possible. To work correctly in SketchUp 2018, I believe I can only create the plugin using plain JavaScript without a framework.

6

Thanks, I checked, and https://angular.io/ works in SU 2021, but not SU 2020.

7

Thank you for the help, Greg.

8

SU2020 was still on CEF 64, whereas 2021 was upgraded to CEF 88.

1 Like