# Integrating an angular app in node properties, TypeError: $(...).i18n

**URL:** <https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718>\
**Category:** General\
**Created:** [18 December 2020 17:59 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718 "2020-12-18T17:59:27Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)\
**Post date:** [18 December 2020 17:59 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718/1 "2020-12-18T17:59:28Z")

</div>

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.

```auto
<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`.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66e6fcd883d5a7f7d1a377d8988b0e0766040cae.png)

**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

```auto
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}

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 December 2020 18:05 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718/2 "2020-12-18T18:05:54Z")

</div>

check the network tab on devtools

My betting is it cannot find your `<script>` resources `jquery.i18n.js`

Did you install jquery.i18n.js, jquery.i18n.fallbacks.js, jquery.i18n.parser.js etc into the static folder?

I suspect you need to have a leading slash on the src path e.g. `<script src="/jquery.i18n.js"></script>` assuming the file `jquery.i18n.js` is in `C:\Users\kib\Desktop\Node-RED Data Processor\node-red-contrib-VariableBrowser\httpStatic`

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [18 December 2020 18:22 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718/3 "2020-12-18T18:22:33Z")

</div>

> [@Steve-Mcl](#):
>
> Did you install jquery.i18n.js, jquery.i18n.fallbacks.js, jquery.i18n.parser.j

Node-RED provides its own `i18n()` function on `$()`. Installing any of those jquery i18n libraries will likely break a lot of things.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 December 2020 18:23 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718/4 "2020-12-18T18:23:51Z")

</div>

Does node-red expose the i18n to dashboard too?

Edit....

Ah - my mistake - I didn't look closely enough at the HTML. I was thrown by the mention of " `httpStatic`", & the thread being in the "general" category.

@Kib as Nick has pointed out, i18n is already included in node-red. For other libs, you cannot (or rather should not) be putting them in httpStatic - how would other users of your node get these?

You can create an endpoint in your node and server these files.

Search node-red source for RED.httpAdmin.post and RED.httpAdmin.get - you will find examples of how to server extra content (like the .js files) from your node src to the node-red UI

---

<div class="post-metadata">

**Author:** ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)\
**Post date:** [18 December 2020 19:29 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718/5 "2020-12-18T19:29:50Z")

</div>

Hey, @knolleary Thanks for the assistance already. It would be great if threre is a resource on how to use it ? I went throught the internationalisation article [here.](https://nodered.org/docs/creating-nodes/i18n), but honestly couldnt understand how to solve this issue.

I kinda understood what you wrote, but I tried initially without any of those extra jquery i18n libraries, like this.

```auto
<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="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 added them as static resources to my application, only because the error popped up in the first place. Could you guide me to an article that better explains how i use the inbuilt "`i18n()` function on `$()`" or atleast make it referencable to my script and thereby my embedded angular application.

I am new to node red and started using front end stuff only a few days ago. So I would apologize if i am being dumb. 🙂

---

<div class="post-metadata">

**Author:** ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)\
**Post date:** [18 December 2020 19:35 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718/6 "2020-12-18T19:35:17Z")

</div>

Thanks @Steve-Mcl for your reply.🙂

> [@Steve-Mcl](#):
>
> @Kib as Nick has pointed out, i18n is already included in node-red. For other libs, you cannot (or rather should not) be putting them in httpStatic - how would other users of your node get these?

The users of my node would be served an angular application which would need the static resource `.js` files , for it(embedded angular application) to be displayed in the node properties panel.

> [@Steve-Mcl](#):
>
> You can create an endpoint in your node and server these files

I didnt know this thanks..  
I thought of adding an endpoint to the admin api (this would make my life a lot easier, honestly), but i wasnt quite sure how. Can you guide me to some article or documentation (The official NodeRED docs for the HTTP admin api doesnt state this, or i didnt read it properlöy 😛 )?

---

<div class="post-metadata">

**Author:** ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)\
**Post date:** [18 December 2020 19:39 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718/7 "2020-12-18T19:39:30Z")

</div>

also, @Steve-Mcl and @knolleary Is it possible that the Ui-Editor isnt able to find its own `.i18n` implementation for `$()` because i changed the `httpStatic` or is it completely unrelated ?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [18 December 2020 20:38 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718/8 "2020-12-18T20:38:11Z")

</div>

Well, I have no idea if the `i18n()` function we provide is at all similar to the one provided by `jquery.i18n`. Ours comes from the `i18next` library.

As for what you are trying to do - I don't know how practical it is to embed a whole angular app into a node's edit dialog. You'll be pulling in a lot of stuff to the page that could well cause conflicts with what's already there. Just seeing the line:

```auto
  <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> 

```

means there's a tonne of stuff there that could be causing problems.

Depending on what you want the angular app to do, one option would be to use an iframe to embed it from a custom path you define on the `RED.httpAdmin` express app. But it wouldn't be able to interact with the rest of the editor dialog if that was a requirement.

---

<div class="post-metadata">

**Author:** ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)\
**Post date:** [22 December 2020 18:12 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718/9 "2020-12-22T18:12:43Z")

</div>

Yes, I had the app inside an Iframe initially, but this,

> [@knolleary](#):
>
> But it wouldn't be able to interact with the rest of the editor dialog if that was a requirement.

I want this to happen, so, yeah. I am not sure as to how to proceed.

One thing that could do is pass messages through the [Window.postMessage()](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) but it would be extremely cumbersome to add listeners and pass different messages from the iframe to recognize different functions if i need to communicate between the elements of the editor dialogue.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 February 2021 18:13 UTC](https://discourse.nodered.org/t/integrating-an-angular-app-in-node-properties-typeerror-i18n/37718/10 "2021-02-20T18:13:07Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.