Issue with node[0].nodeValue = value when using translate-directive in IE

[joacim-boive]

HTML1300: Navigation occurred.
File: index.html
Error: Invalid argument.
at interpolateFnWatchAction (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:8020:17)
at interpolateFnWatcher (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:10177:17)
at watchGroupAction (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:13915:13)
at constantListener (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:12836:11)
at Scope.prototype.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:14243:23)
at Scope.prototype.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:14506:13)
at done (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:9659:36)
at completeRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:9849:7)
at requestLoaded (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js:9790:9)

You have the same issues as described here:
rubenv/angular-gettext#59

I guess you're sharing some code.

The workaround is to use the filter instead of the directive.

[DOrlov77]

Yep - I failed on this issue too.
The problem is the translate directive tries to resolve a not existing node in IE.
My suggestion is to set the translate directive as terminal to fix the order of the things.

While waiting the official fix my workaround is:

angular.module('pascalprecht.translate')
    .config(function($provide) {
        $provide.decorator('translateDirective', function($delegate) {
            var directive = $delegate[0];
            directive.terminal = true;

            return $delegate;
        });
    });

[knalli]

I do not get this one

The problem is the translate directive tries to resolve a not existing node in IE.

Are you speaking about a timing issue? How can a translate directive work without a node?

[DOrlov77]

Just try to debug in IE11.

[tspaeth]

Could someone of you share a complete plunker / example for this issue please?
I don't get this error on directive usage in IE11 on my projects!

[DOrlov77]

try this plunker: http://plnkr.co/edit/IVKLzm0ejhyyBP421Rn8?p=preview

[tspaeth]

Okay. It happens on the interpolated usage of a translation key. That is an important information so we know where to look 😄

First Analysis: Works with 2.4.2 somehow.

[tspaeth]

Even without referring to the gettext project - angularjs is containing an issue on this as it is not directly an issue of angular-translate but the way of the module usage and transclusion I bet.

See angular/angular.js#8659

Following the advices there, you should write into the directive:

<h1 translate="HELLO_PLNKR"></h1>

to avoid this problem.

[DOrlov77]

But having a few big enough projects I couldn't replace all these occurrences...
Currently I just use the trick with terminal only in one place and it seems to fit my needs.

Have you better sugestion(s) ?

[tspaeth]

Did you check on angular-translate 2.4.2 if the error happens there?
If not: Even though it is an old version - maybe it is working for your cases.

Besides that: No, not something else besides your terminal workaround or patching angular.js itself :-)

[DOrlov77]

:) Ok

[valotas]

We have the issue with v2.6.0

[McShazy]

@DOrlov77 I haven't jumped into the Angular source code too much to see what exactly it's doing, however, just to have some references, this might be a related: https://connect.microsoft.com/IE/feedbackdetail/view/944330/invalid-argument-error-when-changing-nodevalue-of-a-text-node-removed-by-setting-innerhtml-on-an-ancestor#

[wawyed]

Any updates on this?

[knalli]

At the moment, I'm not fully aware of all consequences of terminal. Probably this could break existing solutions depending on the result of translate already. This would change the resolution dramatically. I'm still not sure this would fix the actual issue.

The current problem is: As speaking for me, I'm still not getting the actual problem. So yes I'm seeing there is a problem.. but not WHAT it is exactly.

The fix in gettext was this here: 77f039c2a51cdce4e6d1226a2d504b1ea836705b

I've applied this for us also now, but please have a look at this!

In order to checkout this:

• Checkout canary
• run npm install (aware of the current DDoS issues in GitHub)
• run grunt build
• use the generated files in dist/*.js as a replacement

[knalli]

I've forked the demo at http://plnkr.co/edit/3Tuon2cqP1Sw4kD7oiZU?p=preview and injected the latest canary build.

[tspaeth]

@knalli The link in this comment does not work: #925 (comment) ... "I've applied this for us also now" leads to 404 :)

[knalli]

Link should be c4b16d3

[brafkind]

Any updates on this?

[knalli]

Well, the patch in mention has made it into 2.8.0 already, but we have got NO feedback until today...

[cfey]

It's still happening, I'm using angular translate 2.8

[mahpour]

Confirmed not fixed in v2.9.2 with IE v11.0.9600.18205

[tspaeth]

Sorry, guys. It works here?!

See forked plnkr http://plnkr.co/edit/IeysDIAGMy9RjioXZBbt?p=preview that includes the following versions:

• latest (2.9.2) 👍
• 2.8.1 👍
• 2.7.0 👎

On my IE11 11.0.9600.18097 everything works fine. with the two newer versions.
No error from the screenshot in the console.
As a proof of fix - if you activate the 2.7.0 -> error.

[mahpour]

It won't throw the exception in my application through happy path. Exception happens after view loaded and translate is rebinding... does that help?

[tspaeth]

Could you please provide an example case / plnkr with your setup as the one knalli referred to does work?!

[mahpour]

I found the origin of problem in my code. I had an angular directive to render some shapes as svg and used translation inside a <title> tag in the svg tag which was causing the issue. The error was changed when I switched to translate attribute as oppose as angular filter though.

New exception message:

"Unable to get property 'match' of undefined or null reference [object Object]"

http://plnkr.co/edit/VSMwwartq3emEApmIMuH?p=preview

[tspaeth]

Yeah, outerHTML on SVG elements will not work correctly. For example see here: http://stackoverflow.com/questions/12592417/outerhtml-of-an-svg-element

[knalli]

Closing this. I recommend filter or the latest addition translate-attr, but not using translate within svg elements when targetting IE8.