I have built a couple of custom nodes (mostly using the default settings and not anything fancy) and i just tried the following to serve an existing compiled angular application inside the node-properties HTML. the new html looks like this.
<script type="text/html" data-template-name="Variable">
<app-root></app-root>
<div class="form-row">
<label for="node-input-server"><i class="fa fa-tag"></i> InfluxDB Configuration</label>
<input type="checkbox" id="node-input-server">
</div>
<div class="form-row">
<label for="node-input-var_id"><i class="fa fa-tag"></i> Variable ID</label>
<input type="text" id="node-input-var_id" placeholder="Inferred automatically from the selection above">
</div>
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Variable Name</label>
<input type="text" id="node-input-name" placeholder="Inferred automatically from the selection above">
</div>
<div class="form-row">
<label for="node-input-address"><i class="fa fa-tag"></i> Variable Address</label>
<input type="text" id="node-input-address" placeholder="Inferred automatically from the selection above">
</div>
<div class="form-row">
<label for="node-input-measurement"><i class="fa fa-tag"></i> Measurement</label>
<input type="text" id="node-input-measurement" placeholder="Inferred automatically from the selection above">
</div>
<div class="form-row">
<label for="node-input-valueFilter"><i class="fa fa-tag"></i> InfluxQL "Select" Function</label>
<input type="text" id="node-input-valueFilter" placeholder="Please Refer to the Link below for any further reference">
</div>
<label><i>https://docs.influxdata.com/influxdb/v1.7/query_language/functions/#selectors</i></label>
<div class="form-row">
<label for="node-input-relativeTime"><i class="fa fa-tag"></i> Relative Time Filter</label>
<input type="text" id="node-input-relativeTime" placeholder="Enter 0 for live measurement value or Please Refer to the Link below for any further reference">
</div>
<label><i>https://docs.influxdata.com/influxdb/v1.7/query_language/data_exploration/#relative-time</i></label>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="CLDRPluralRuleParser.js"></script>
<script src="jquery.i18n.js"></script>
<script src="jquery.i18n.messagestore.js"></script>
<script src="jquery.i18n.fallbacks.js"></script>
<script src="jquery.i18n.language.js"></script>
<script src="jquery.i18n.parser.js"></script>
<script src="jquery.i18n.emitter.js"></script>
<script src="jquery.i18n.emitter.bidi.js"></script>
<script src="ru.js"></script>
<script src="runtime.js" defer></script><script src="polyfills.js" defer></script><script src="scripts.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script> -->
<!-- <link rel="shortcut icon" href="">
<link rel="stylesheet" href="styles.23f05eb448dfbad3c84c.css"></head>
<script src="runtime-es2015.1eba213af0b233498d9d.js" type="module"></script>
<script src="runtime-es5.1eba213af0b233498d9d.js" nomodule defer></script>
<script src="polyfills-es5.da26f0600de65697c791.js" nomodule defer></script>
<script src="polyfills-es2015.f5e187a40521b65364f1.js" type="module"></script>
<script src="scripts.647ffdfb49656239ed30.js" defer></script>
<script src="main-es2015.47c6fa190d218dcee470.js" type="module"></script>
<script src="main-es5.47c6fa190d218dcee470.js" nomodule defer></script> -->
</script>
I edited the httpStatic inside settings.js to the location of these files.
How ever i can not get past this error while loading localhost:1880
.
I do not think editing the red.min.js is a good idea and honestly cant understand whats written inside.
Can someone please assist me as to if such an addition of an offline angular application is even possible.
I tested this method :
- Building an angular application
- copyiyig all the script files to the
httpStatic
location - adding
<app-root></app-root>
and script refs to the template of the node.
Which worked fine with the sample/default angular app.
P.S. There are no errors while starting node-red
PS C:\Users\kib\Desktop\Node-RED Data Processor\node-red-contrib-VariableBrowser> node-red
Debugger attached.
18 Dec 18:58:59 - [info]
Welcome to Node-RED
===================
18 Dec 18:58:59 - [info] Node-RED version: v1.1.3
18 Dec 18:58:59 - [info] Node.js version: v12.13.1
18 Dec 18:58:59 - [info] Windows_NT 10.0.18363 x64 LE
18 Dec 18:59:00 - [info] Loading palette nodes
18 Dec 18:59:02 - [info] Dashboard version 2.23.4 started at /ui
18 Dec 18:59:02 - [info] Settings file : \Users\kib\.node-red\settings.js
18 Dec 18:59:02 - [info] HTTP Static : C:\Users\kib\Desktop\Node-RED Data Processor\node-red-contrib-VariableBrowser\httpStatic
18 Dec 18:59:02 - [info] Context store : 'default' [module=memory]
18 Dec 18:59:02 - [info] User directory : \Users\kib\.node-red
18 Dec 18:59:03 - [warn] Projects disabled : editorTheme.projects.enabled=false
18 Dec 18:59:03 - [info] Flows file : \Users\kib\.node-red\flows_nb-064.json
18 Dec 18:59:03 - [info] Server now running at http://127.0.0.1:1880/
18 Dec 18:59:03 - [warn]
---------------------------------------------------------------------
Your flow credentials file is encrypted using a system-generated key.
If the system-generated key is lost for any reason, your credentials
file will not be recoverable, you will have to delete it and re-enter
your credentials.
You should set your own key using the 'credentialSecret' option in
your settings file. Node-RED will then re-encrypt your credentials
file using your chosen key the next time you deploy a change.
---------------------------------------------------------------------
18 Dec 18:59:03 - [info] Starting flows
18 Dec 18:59:03 - [info] Started flows
18 Dec 18:59:03 - [audit] {"event":"comms.open","level":98,"timestamp":1608314343367}
18 Dec 18:59:14 - [metric] {"level":99,"event":"runtime.memory.rss","value":64421888,"timestamp":1608314354366}