0

Angular 7 application not working on internet explorer. It says invalid character in vendor.js

I have already apply polyfills.ts changes but it still not working.

my tsconfig.json => 

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

solved

I found a module 'identicons' which containing back-ticks and removed it from the project and the problem solved. Thank you all for your helps guys.

oktykrk
  • 111
  • 1
  • 11
  • It could be because of the reason that IE may not be supporting some of the JS features used in code. Can you please check out the code at the given line and column in that file? – user Aug 09 '19 at 07:43
  • It's because you must have used ` template string (button below the Esc), IE 11 does not support it. You should have to use " or ' for your strings – Kiran Shinde Aug 09 '19 at 07:45
  • it is about ` character. In vendor.js there are ` characters and ie not supports it I know but should not compiler convert them for ie support ? I have already follow pollyfills directions. – oktykrk Aug 09 '19 at 07:47
  • I don't think compilers converts it. Also for polyfills you can add this script in your index.html `https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js` – Kiran Shinde Aug 09 '19 at 07:51
  • You could refer to [my answer](https://stackoverflow.com/questions/57192843/angular-applications-throwing-syntax-errors-on-ie11-only/57193444#57193444) in another thread. And the polyfills are only for the popular used es6+ functions which are not in IE11. If your code contains more code that is not supported then you have to find the polyfill yourself. – Yu Zhou Aug 09 '19 at 08:34
  • None of these worked unfortunately. The problem is a third party library which includes back-ticks. I thought compiler take care of them but in my project it does not. – oktykrk Aug 09 '19 at 10:23

3 Answers3

0

It looks like back-ticks are used at that line and IE11 doesn't support it. To make it work you will have to transpile your code with Babel.

user
  • 568
  • 5
  • 19
  • Hi thanks for the answer, I think babel will solve the problem but I could not figure out how to transpile the outputs with babel during or after compile my angular project. Is there any way/documentation about this? – oktykrk Aug 09 '19 at 10:22
  • You can refer this [article](https://medium.com/@hubert.zub/using-babel-7-and-preset-typescript-to-compile-angular-6-app-448eb1880f2c). – user Aug 09 '19 at 10:25
  • TS target is set to ES5, so it is transpiled correctly. – Aux Aug 09 '19 at 10:28
  • it was "identicons" module!! just removed it from the project and error gone. Thank you all. I am updating my question as solved. – oktykrk Aug 09 '19 at 10:54
0

It's because you must have used ` template string (button below the Esc), IE 11 does not support it. You should have to use " or ' for your strings

More info

https://caniuse.com/#search=string

Kiran Shinde
  • 5,732
  • 4
  • 24
  • 41
0

You have as target es5 for your typescript, so there is nothing wrong inside your own source code, because it will transpile to normal quotes.

Also the errors comes from vendor.js. This means that you are using a custom library which does not support IE11. Probably browsing the vendor.js where the error resides will give you a clue which library is causing it

Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149