This is my Owl component in Odoo 15. It is meant to load chart lib from CDN.
/** @odoo-module **/
import { loadAssets } from "@web/core/assets"; //not working.
import { loadJS } from "@web/core/assets"; //not working.
import { registry } from "@web/core/registry"
import { useService } from "@web/core/utils/hooks";
const { Component } = owl;
const { onWillStart, useRef, onMounted } = owl.hooks;
export class ChartRenderer extends Component {
setup(){
this.chartRef = useRef("chart")
onWillStart(async ()=>{
await loadJS("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js")
//await loadAssets("/web/static/lib/Chart/Chart.js")
})
onMounted(()=>this.renderChart())
}
renderChart(){
//body
}
}
ChartRenderer.template = "my_module.ChartRenderer"
Upon loading the module, both loadJS() and loadAssets() within onWillStart function are throwing errors.
loadJS() error:
"UncaughtPromiseError > ReferenceError
Uncaught Promise > loadJS is not defined.....
===========================
loadAssets() error:
UncaughtPromiseError > TypeError
Uncaught Promise > Cannot use 'in' operator to search for 'bundles' in /web/static/lib/Chart/Chart.js.......
What am I not doing correctly? What is the correct way to load JS library within an Owl component?
Thanks.