Load external JS with document.write from a third party in Angular 8

Question

I'm creating a library with Angular 8 to render dashboards from Pentaho CTools to avoid to use iframes. If I call the script straight from index.html it works fine so I can render the dashboards. But in my case I need to inject that from appendChild so I can insert the userId, password and the pentaho url more dynamically.

const url = `${pentahoHost}${PENTAHO_URL}userid=${userId};password=${password};port=433`;
const scriptId = 'pgi-pentaho';
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.id = scriptId;
document.head.appendChild(script);

But when I run the app it gives me this message:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

And this is what I get from the call from Pentaho server:

/** This file is generated in cdf to allow using cdf embedded.
It will append to the head tag the dependencies needed, like the FULLY_QUALIFIED_URL**/

var requireCfg = {waitSeconds: 30, paths: {}, shim: {}, map: {"*": {}}, bundles: {}, config: {service: {}}, packages: []};

requireCfg.config['cdf/dashboard/Dashboard'] = {
context: {"path":"","serverLocalDate":1610033507192,"queryData":{},"roles":["Administrator","Authenticated"],"sessionTimeout":7200,"sessionAttributes":{},"locale":"en_US","params":{},"serverUTCDate":1610033507192,"user":"admin"},
storage: {}
};
// injecting document writes to append the cdf require files
document.write("<script language='javascript' type='text/javascript' src='http://localhost:4200/pentaho/content/cte/resources/editor/cte-require-js-cfg.js'></script>");
document.write("<script language='javascript' type='text/javascript' src='http://localhost:4200/pentaho/content/twelve-days-visualizations/resources/web/require-js-cfg.js'></script>");
document.write("<script language='javascript' type='text/javascript' src='http://localhost:4200/pentaho/content/pentaho-cdf-dd/js/cde-require-js-cfg.js'></script>");
document.write("<script language='javascript' type='text/javascript' src='http://localhost:4200/pentaho/content/config/deploy/client-config-enabler-require-js-cfg.js'></script>");
document.write("<script language='javascript' type='text/javascript' src='http://localhost:4200/pentaho/content/common-ui/resources/web/common-ui-require-js-cfg.js'></script>");
document.write("<script language='javascript' type='text/javascript' src='http://localhost:4200/pentaho/content/pentaho-cdf/js/cdf-require-js-cfg.js'></script>");
document.write("<script language='javascript' type='text/javascript' src='http://localhost:4200/pentaho/js/require-js-cfg.js'></script>");
document.write("<script language='javascript' type='text/javascript' src='http://localhost:4200/pentaho/content/reporting/reportviewer/reporting-require-js-cfg.js'></script>");
document.write("<script language='javascript' type='text/javascript' src='http://localhost:4200/pentaho/content/common-ui/resources/web/require.js'></script>");
document.write("<script language='javascript' type='text/javascript' src='http://localhost:4200/pentaho/content/common-ui/resources/web/require-cfg.js'></script>");

requireCfg.config["pentaho/environment"] = {
  theme: null,
  locale: "en_US",
  user: {
    id: "admin",
    home: "/home/admin"
  },
  server: {
    root: "http://localhost:4200/pentaho/"
  },
  reservedChars: "\/\\\t\r\n"
};

/** @deprecated - use 'pentaho/environment' module's variable instead */
var CONTEXT_PATH = 'http://localhost:4200/pentaho/';

/** @deprecated - use 'pentaho/environment' module's variable instead */
var FULL_QUALIFIED_URL = 'http://localhost:4200/pentaho/';

/** @deprecated - use 'pentaho/environment' module's variable instead */
var SERVER_PROTOCOL = 'http';

/** @deprecated - use 'pentaho/environment' module's variable instead */
var SESSION_NAME = 'admin';

/** @deprecated - use 'pentaho/environment' module's variable instead */
var SESSION_LOCALE = 'en_US';

/** @deprecated - use 'pentaho/environment' module's variable instead */
var HOME_FOLDER = '/home/admin';

/** @deprecated - use 'pentaho/environment' module's variable instead */
var RESERVED_CHARS = '\/\\\t\r\n';

/** @deprecated - use 'pentaho/environment' module's variable instead */
var RESERVED_CHARS_DISPLAY = '\/, \\, \\t, \\r, \\n';

/** @deprecated - use 'pentaho/environment' module's variable instead */
var RESERVED_CHARS_REGEX_PATTERN = /.*[\/\\\t\r\n]+.*/;

The document.write is instantiated by the script from Pentaho, so I have no control of it and I can't modify the script.

And I tried to use postscribe but the problem persists

Load external JS with document.write from a third party in Angular 8

0 Answers0