Open Angular Framework in HtmlDialog

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 =
    dialog_title: “Dialog Example”,
    preferences_key: “my_name_my_extension_my_dialog”,
    style: UI::HtmlDialog::STYLE_DIALOG

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.

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

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


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 =
  dialog_title: 'Dialog Example',
  width: 1200,
  height: 1200
dlg.set_url ""

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:

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.

Thanks, I checked, and works in SU 2021, but not SU 2020.

Thank you for the help, Greg.

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

1 Like