CODEWITHSUNDEEP
javascriptangularjsinternet-explorersyntax-error
Sonny Jayet
Sonny Jayet

Reputation: 454

Internet Explorer - Syntax Error - AngularJS

I am working on a web site using angularJS. The project is made on Visual Studio so the server is IIS.

When using Chrome, everything is working fine. But my boss wants also this site to work fine with Internet Explorer 11, in case of some clients are only using this browser.

The problem is that i have an error at an unexpected place when is use IE, for example : 

Syntax Error : Caractère Incorrect ( that's french, it means Invalid character )
   at getConnectedUser (http://localhost:54579/mypath/myfile.js:121:13)*

And if i open this file at line 121

vm.connectedUser = JSON.parse($cookies.get("userLogged"))

and the 13th character is the v from vm ( since i have some tabs )

the wole function is : 

    function getConnectedUser() {
        vm.connectedUser = JSON.parse($cookies.get("userLogged"))
    }

Which is quite normal according to me...

I don't know how to solve this, since the error does not seem to come from the code but from the interpretation of my browser.

I have read that some keywords were not supported to declare variables, like const. I use "let" to declare my variables and it is supported by IE 11 according to this site

EDIT : i also use "var" ( for example : var vm = this )

It would be very helpful if you have some ideas to find a solution.

Thanks for reading,

Sonny

Upvotes: 2

Views: 1302

Answers (2)

Sonny Jayet
Sonny Jayet

Reputation: 454

So I tried to apply what you guys asked, here is what i've got :

The problem actually comes from my cookies, IE can't read it correctly, I get undefined when trying to log my cookie's type, instead of getting "string". So i went to a different part of the projet, where this cookie is created. I try to log the cookie just after it is created so it can't be alterated: 

var myObject = { "value" : "sonny" }
var stringified = JSON.stringify(myObject) // myObject is validated by jsonlint.com

try {                
     $cookies.put("userLogged", stringified, {})
     console.log("ok")
} 
catch (error) {
     console.log(error)
}
// i got "ok" in logs , the try part is successful

console.log("fresh cookie : ")
console.log(typeof $cookies.get("userLogged"))
// On Chrome Console : string
// On Ie Console : undefined
console.log(typeof JSON.parse($cookies.get("userLogged")))
// On Chrome Console : object 
// On Ie Console: Not logged , i have the Syntax Error Message

So the problem seems to be that IE can't read the cookie i just set before. Using IE developers tools , i can see the cookie line :

Value : %7B%22value%22%3A%22sonny%22%7D

each special character ( '{', '"' and '}' ) is replaced by "%7B" , "%22" and "%7D"... It is exactly the same with chrome developers tools so i don't think it should be a problem.

Can IE actually read cookies using angular and ngCookies ?

Upvotes: 1

Gangadhar Jannu
Gangadhar Jannu

Reputation: 4414

As everyone mentioned in comments. It is difficult to solve the issue with information provided.
So the best option could be using IE developer tools and debug your application. Here is how I can troubleshoot the issue.

function getConnectedUser() {
    // forces browser to stop at below line
    debugger;
    var loginInfo = $cookies.get("userLogged"); //put a debug point
    // check for loginInfo existence and typeof loginInfo should be string
    if (loginInfo && typeof loginInfo === 'string'){
        vm.connectedUser = JSON.parse(loginInfo);
    }
}
  • Put a break point in the getConnectedUser function
  • Check the value of $cookies.get("userLogged"), whether it is returning data or not
    • yes => check the type of data. It must be a valid JSON string format.
    • No => do the corresponding actions

Upvotes: 0

Related Questions