Templates not translated in Odoo env about owl HOT 4 CLOSED

You forgot to start the services, the localization service loads the translations. You can take a look at createPublicRoot in self_order_index.js of the pos_self_order module as an example, as the new pos self ordering app is an owl app served from a controller. But indeed this is not the appropriate repo for this question.

from owl.

we should have a howto on the official owl documentation for a setup for a controller in odoo with a minimal set of files, owl, templates properly setup, and translations as well

from owl.

task created id=3580007

from owl.

we should have a howto on the official owl documentation for a setup for a controller in odoo with a minimal set of files, owl, templates properly setup, and translations as well

That would be super helpful!

You forgot to start the services, the localization service loads the translations. You can take a look at createPublicRoot in self_order_index.js of the pos_self_order module as an example, as the new pos self ordering app is an owl app served from a controller. But indeed this is not the appropriate repo for this question.

Thanks for the quick reply @sdegueldre, sometimes it is difficult to pinpoint if its an issue on the owl side or Odoo side. I've added the startServices() as per your recommendation:

if (document.querySelector('#some-div')) {
    await whenReady();
    const env = makeEnv();
    await startServices(env);
    mount(
        ExampleComponent,
        document.querySelector("#some-div"),
        {
            env, templates, translateFn: _t, dev: true }
    );
}

However, I am now faced with all sorts of errors in the console (it even gets in a loop of errors):

Error: Cannot add 'EffectContainer' in the registry: it already exists
Error: Cannot add 'DialogContainer' in the registry: it already exists
Error: Cannot add '...' in the registry: it already exists
TypeError: Cannot redefine property: userContext
OwlError: Cannot make the given value reactive
TypeError: env.services.dialog.add is not a function
Error: UI service not initialized!

I tried to mount an App instance instead of the component itself as per the example you suggested (POS self order), however that did not solve it:

import { Component, whenReady, App } from "@odoo/owl";
const app = new App(ExampleComponent, {
        templates,
        env,
        dev: env.debug,
        translateFn: _t,
        translatableAttributes: [],
    });
app.mount(document.querySelector("#some-id");

Perhaps you have any suggestion?

cc @ged-odoo

from owl.