GeezerVison is showing github.com — Angular 20 standalone application · Issue #281 · plotly/angular-plotly.js
Angular 20 standalone application #281DescriptionHello,
I've noticed a new version of this library was released, aligned with Angular 20. However, the sample application in this repository is still using AppModule approach instead of standalone. Could the documentation be updated to outline how to use this library in a standalone application with the latest version (20)?
I'm also not clear on what version of the dependent plotly library I should be using. Before updating to version 20, I was unable to update to the plotly version 3 as this was incompatible with this library. With version 20, do I use version 3 of the plotly dependency? The corresponding @types library doesn't have a version 3 yet. (#278)
Currently, I'm unable to update to the latest version of this library with a standalone Angular 20 application. Could I please get some guidance on this? Thanks! Reacted by Amandus and AnastasiusVivaldus Activityandrzejressel commented on Jul 6, 2025 I've used these dependencies:
"plotly.js-dist": "^3.0.1", (I had some weird bundling issues with non-dist plotly-js)
and I've added this to app.config.ts
// @ts-ignore
import Plotly from 'plotly.js-dist'
export const appConfig: ApplicationConfig = {
providers: [
importProvidersFrom(
PlotlyModule.forRoot(Plotly)
)
]
};jakehockey10 commented on Jul 29, 2025 @andrzejressel I used to import the PlotlyModule in the imports array of the standalone component I was using it in. But you are suggesting I importProvidersFrom the PlotlyModule.forRoot(Plotly) in my app.config. When I do this, my standalone components do not recognize the plotly-plot selector.
Looks like I'm still missing something here on how to use this library with the latest versions in an Angular 20 app jakehockey10 commented on Jul 29, 2025 nvm, it looks like PlotlyComponent is standalone, so I can just import that component into my component now. Thank you for the feedback and help Reacted by Andrzej Ressel jakehockey10 commented on Jul 30, 2025 @andrzejressel oof, I used to import it where I needed it. Now, when I importProvidersFrom directly in my app.config, my bundle size went from 2.5Mb to 7.5Mb. Is there any way to only include this where it is needed, and not contribute to the main/initial bundle? E4RIJMP commented on Aug 25, 2025 Thanks to your responses I was also able to get plotly running.
In app.config.ts I added:
import { PlotlyModule } from 'angular-plotly.js';
import * as PlotlyJS from 'plotly.js-dist-min';
// ...
export const appConfig: ApplicationConfig = {
providers: [
importProvidersFrom(PlotlyModule.forRoot(PlotlyJS)),
// ...
],
};
And in the component that has the chart I imported PlotlyComponent.
But it appears as if that import creates a warning for each unit test of the component (maybe there still is an underlying issue and potentual memory leaks?):
WARN: 'NG0953: Unexpected emit for destroyed `OutputRef`. The owning directive/component is destroyed.'
Does anyone else get these warnings? andrzejressel commented on Aug 25, 2025
@andrzejressel oof, I used to import it where I needed it. Now, when I importProvidersFrom directly in my app.config, my bundle size went from 2.5Mb to 7.5Mb. Is there any way to only include this where it is needed, and not contribute to the main/initial bundle?
I've decided to ditch bundling plotly and I'm using it from CDN:
jakehockey10 commented on Aug 25, 2025 Inside of including importProvidersFrom(PlotlyModule.forRoot(PlotlyJS)) in the app.config providers array (I also don't want my initial app bundle to big as big as that makes it), I include Plotly in a component that needs it:
import { PlotlyComponent, PlotlyService } from 'angular-plotly.js';
import Plotly, { Layout, Margin } from 'plotly.js-dist-min';
@Component({
selector: 'app-dashboard-chart',
imports: [MatCardModule, MatProgressSpinnerModule, PlotlyComponent],
templateUrl: './dashboard-chart.component.html',
styleUrl: './dashboard-chart.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [PlotlyService],
})
export default class DashboardChartComponent {
constructor() {
if (!PlotlyService.plotly) PlotlyService.setPlotly(Plotly);
}
}But if there is a better way of doing this, I'd be interested in following better practices... cyrilvincent commented on Jan 6, 2026 The method importProvidersFrom no longer exist in Angular 21
My way to use it with standalone in Angular 21
app.config.ts
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
// @ts-ignore
import Plotly from 'plotly.js-dist-min'
import { PlotlyModule } from 'angular-plotly.js';
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideRouter(routes),
...PlotlyModule.forRoot(Plotly).providers ?? [],
]
};
my component (dataviz.ts)
import { Component } from '@angular/core';
// @ts-ignore
import Plotly from 'plotly.js-dist-min'
import { PlotlyModule } from 'angular-plotly.js';
@Component({
selector: 'app-dataviz',
imports: [PlotlyModule],
templateUrl: './dataviz.html',
styleUrl: './dataviz.scss',
})
export class Dataviz {
data = [
{ x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+markers', name: 'Série A' },
{ x: [1, 2, 3], y: [4, 1, 7], type: 'bar', name: 'Série B' },
];
layout: Partial<Plotly.Layout> = {
title: { text: 'Mon premier graphique' },
autosize: true,
margin: { t: 40, r: 10, b: 40, l: 40 },
};
config: Partial<Plotly.Config> = {
responsive: true,
displayModeBar: true
};
}
dataviz.html
<h1>Demo Plotly</h1>
<plotly-plot
[data]="data"
[layout]="layout"
[config]="config">
</plotly-plot>
Reacted by Diamond Lewis and Artyom
MetadataMetadataDevelopmentNo branches or pull requestsIssue actions
|