Request to have more options as CDN for PlotlyViaCDNModule

[swetankrathi]

• I'm submitting a ...

  • bug report
  • feature request

• Description
  A couple of days back, plotly CDN was down for hours, leaving even plotly's website not functional(links below). I have many folks on the community forum requesting solutions. I propose support for other CDNs, such as Cloudflare. In some cases, devs might need to host a custom build of plotly.js, but there is no provision to use a CDN. It would be great if devs could choose either plotly, cloudflare or custom(pass your URL) as CDN providers.

• Current behaviour?
  Only plotly's default CDN is an option. If there is any issue with the CDN, the charts don't work.

• Expected behaviour?
  Devs should have options to choose from multiple CDNs. In case of such events, a custom CDN can also be used to keep applications functional.

• Resources/References
  Here are some links to the recent incidents:

  • https://community.plotly.com/t/plotly-js-cdn-down/76253/20
  • 403: Forbidden Error - Plotly unavailable now for download/use? plotly.js#6648
  • CDN down plotly.py#4253

If devs are aligned, I am happy to submit a PR.

[andrefarzat]

Hello @swetankrathi . I think it's a great feature to be implemented! Feel free to submit a PR with this feature.

[swetankrathi]

Thanks @andrefarzat!

However, after making changes, I am not able to test it as build is not passing. Can you please help me with this error?

...angular-plotly.js/dist/plotly/fesm2020/angular-plotly.js.mjs:170:6-42 - Error: Module not found: Error: Can't resolve './themes' in '/Users/xxxx/Documents/xxxx/angular-plotly.js/dist/plotly/fesm2020'

[andrefarzat]

It's true. Master has this bug. I will look at it

[andrefarzat]

just pushed a quickfix =)

[swetankrathi]

Thanks @andrefarzat! However, there are still issues.

That theme import error is still there. But I can fix that by disabling the following code in plotly.theme-loader.service.ts:

public load(themeName: PlotlyTheme): Promise<any> {
        this._isLoading = true;
        return new Promise(resolve => {
            // import(`./themes/${themeName}.json`).then(data => {
                resolve(true);
            //     this._isLoading = false;
            // });
        });
    }

After this, I am able to serve apps without error but I have another error on console.
Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with EnvironmentInjector#runInContext. Find more at https://angular.io/errors/NG0203

The above error is on Angular 14 and 16 as well. What am I missing here?

[swetankrathi]

My bad! The NG0203 error can be fixed by adding preserveSymlinks: true in build options of angular app.

I will comment the required code in plotly.theme-loader.service.ts and raise a PR soon.