'Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module in my angular 11 app

In my angular 11 apps, I am trying to install ngx-echats. Unfortunately, I am getting an error when exporting NgxEchartsModule in my app.module.ts.

That is the error that I am getting:

Error: ./node_modules/ngx-echarts/fesm2015/ngx-echarts.mjs 520:24-45
Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available)

In my app root folder, I already have an webpack.config.js file and it includes with :

module.exports = {
    configureWebpack: {
        module: {
            rules: [{
                test: /\.mjs$/,
                include: /node_modules/,
                type: "javascript/auto"
            }]
        }
    }
}

Still, I am having this error. Can someone please tell me how to solve this issue?



Solution 1:[1]

You must update the angular cli to the latest version

Solution 2:[2]

I was using the latest version of ngx-echarts, version 8, which was not compatible with angular 11. Downgraded to ngx-echats, version 6 solved the issue. Thank you all.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Haris Bouchlis
Solution 2 Kazi