I have a small sample app that correctly renders an owl component.  I'm trying to incorporate the component into a larger app made with qweb templates and widgets.

For the small program that works... the controller:

class MyController(http.Controller):
    @http.route('/owlg1/portal_page', type='http', auth='public', website=True)
    def render_portal_page(self):
        _logger.info ("render_portal_page(self), start...")
        html_content = request.render('owlg1.portal_page')
        _logger.info("render_portal_page : Rendered HTML content: %s", html_content)
        return html_content

...the template

<template id="portal_page" name="My Portal Page">
    <t t-call="portal.frontend_layout">
        <div id="wrap">
                <div class="container">
                    <h4>My Portal</h4>
                    <owl-component name="owlg1.ChatComponent"/>
                </div>
        </div>
    </t>
</template>

and last, part of the manifest:

    'depends': ['web', 'website', 'im_livechat', 'mail'],
    'assets': {
        'web.assets_frontend': [  ... widget, owl component, owl component template ],
    },
    'data': [
        'views/portal_page.xml',
    ],

The owl component, the main widget and the owl template are all small, generic pieces. (I can post them if you wish)


In my larger app I would like to incorporate the same component into a page controlled by widgets and templates.  The template holding the owl component is not immediately on the page when the user goes there.  The user has to click on a few links to drill down to the template with the owl component is.  The source code is like this:

The widget that renders various part of the page, and the method in question:

const PortalDashboardWidget = publicWidget.Widget.extend({
    selector...
    events...  (but nothing related to the button in the own component)
    ... methods...

_setupSubjectDetail: async function(in_userSubjectId) {
    const userSubjectResult = await rpc(
     urlBase + '/dashboard/usersubject/chatbutton',   
                    { userSubject_id: in_userSubjectId }
       );
    $('#chat-block').html(chatButtonResult.html);

});

publicWidget.registry.PortalDashboardWidget = PortalDashboardWidget;
export default PortalDashboardWidget;

The controller:

@http.route(WebsiteController._routes['base'] + '/dashboard/usersubject/chatbutton', type='json', auth='user')

def getChatButton(self, userSubject_id=None, **_kw):
    ... get the chat id from the db, livechat_channel_session.id  (this part works)
    html_content = request.env['ir.ui.view']._render_template(
      "myapp.chat-button-content", { 'chat_session_id': livechat_channel_session.id
    })
    html_content = str(html_content)
    return {'html': html_content}

... and finally part of the manifest:

   'depends': ['base_setup',
        'base',
        'web',
        'portal',
        'project',
        'mail',
        'website',
        'im_livechat',
    ],
    'installable': True,
    'application': True,
    'data': [
        'security/ir.model.access.csv',
        ...templates... except the owl-component template
        'data/website_data.xml',
        ...
    ],
 'assets': {
    'web.assets_frontend': [
        'myapp/static/src/js/chat/chat_service.js', #owl service, component, template                 
        'myapp/static/src/js/chat/chat_component.js',
        'myapp/static/src/xml/chat/chat_template.xml',  
        ... scss, images, widget javascript
    ],
},

chat-block is a template that is not immediately rendered when the user goes to the page.  The user has to click to "drill-down" to the template where the chat button is.

The above code works well for all of my other templates and widgets, but in this case, when the teamplate is rendered by the controller, <owl-component>... is in the rendered html, and it is inserted into the web page and sits there, inert.

If I move the owl component to a higher level template, one rendered as shown in my sample code, with a controller using type='http',  and "render(...)", it works.  So I believe the component itself is ok. 

I belive I have to alter the widget javascript and the python controller, but have no idea how.  I've modified both files in various ways but have not succeeded.  One idea I had was to make the controller method type='http' so get the rendering correct, and then somehow change it's http response into a json response to work with the widget.  Mostly I either get <owl-component> in my rendered html, and it does not activate, or I get empty json.

Any help/examples would be greatly appreciated.  If you could provide the "import... " lines in your answer that would help.  Thanks!