Repository navigation
Angular 20 standalone application #281
Description
Activity
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) ) ] };
@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
importProvidersFromthePlotlyModule.forRoot(Plotly)in my app.config. When I do this, my standalone components do not recognize theplotly-plotselector.Looks like I'm still missing something here on how to use this library with the latest versions in an Angular 20 app
nvm, it looks like
PlotlyComponentis standalone, so I can just import that component into my component now. Thank you for the feedback and helpReacted by Andrzej Ressel@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?
Thanks to your responses I was also able to get plotly running.
Inapp.config.tsI 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 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:
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...
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
Hello,
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!