Hi,
we currently have a stack of two different "directives" in the visualize framework inside of Kibana.
One is <visualize> which actually also take care about fetching data from ES and one is <visualization> which you need to pass the data to yourself.
The first one can (and only should) be used via the visualize loader (documentation). This is a plain JavaScript API you can use to embed any visualization into any DOM node. This is the recommended way!
I am sure you potentially can embed an Angular 1 directive into an Angular 2+ application - Google might be a better help here than this forum - BUT I would not recommend you doing this anymore. We will remove that directive very likely in one of the upcoming minor versions, since we are trying to remove Angular completely from Kibana. So I would recommend you only using the plain JavaScript loader as mentioned above.
Also please note (just that there is no confusion around this): All of those APIs are only working if you run INSIDE of Kibana. So if you are writing a custom application plugin for Kibana you can use those APIs. But there is no way you could call these APIs outside of Kibana, since they need Kibana being present around it. You cannot simply import some Kibana classes from your application and expect anything to work.
If that's actually your use case embedding via iFrame is currently the only viable solution you are having currently.
Cheers,
Tim