Estoy tratando de agregar un archivo javascript de un tercero a mi aplicación para mostrar algunas imágenes en la pantalla. Tengo un código de prueba que funciona como un archivo javascript independiente, sin embargo, migrar esto a mi aplicación angular ha sido un dolor de cabeza. Según tengo entendido, el script externo se carga y luego necesito llamar a la función de inicialización, que es una función de nivel global en el archivo externo embed.js .
JS de muestra (en funcionamiento), donde "myTestServer" es la ubicación donde se encuentra este código de terceros:
<script data-name="embed-manager" src="myTestServer/embed/embed.js"></script> function EmbedDashboard( dashboardid ) { const embedManagerPromise = window.initEmbedManager({ initialToken: access_token }); embedManagerPromise.then((embedManager) => { componentConfig.dashboardId = dashboardid; embedManager.createComponent( 'dashboard', componentConfig ) .then(dashboard => dashboard.render( document.getElementById( "embedDash" ), { width: '100%', height: '100%' } )) }); } Usando esto como punto de partida, agregué la ubicación del script embed.js en mi archivo angular.json . Luego en mi componente tengo:
declare const window: any @Component({ selector: 'app-reports-analytics', templateUrl: './reports.component.html', styleUrls: ['./reports.component.css'] }) export class ReportsComponent implements OnInit { embedManagerPromise: any; componentConfig = { "dashboardId": "123456789", "theme":"modern", "interactivityProfileName":"interactive" }, "editor": { "placement": "dockRight" }, "header": { "showTitle": false, } } constructor( ) { } embedDashboard(id) { this.componentConfig.dashboardId = id; this.embedManagerPromise = window.initEmbedManager({ initialToken: '123456789123456789' }); } } Lo que arroja un error al intentar ejecutar el código después de que un botón haga clic en embedDashboard(id)
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'src') at V (embed.js:1) at ReportsComponent.push../src/app/components/company/reporting/reports.component.ts.ReportsComponent.embedDashboard (reports.component.ts:212)