Search code examples
angularinternet-explorerngx-translate

ngx-translate with Angular 9 not working in IE


Our App don't work in the IE, it's showing only a compilation error (SCRIPT1002) and when navigate to that line it shows the class TranslateLoader.

I have already found a similar question about this, unfortunately the answer doesn't work: ngx-translate with Angular 9 not working in IE showing compilation error SCRIPT1002

Any help would be great. Many thanks.

package.json

"@angular/core": "~9.1.6",
.....
"@ngx-translate/core": "^12.0.0",
"@ngx-translate/http-loader": "^5.0.0",
"classlist.js": "^1.1.20150312",
"web-animations-js": "^2.3.2",

browserlist

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11

tsconfig.json

...
"module": "es2015",
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es5",
"typeRoots": [
  "node_modules/@types"
],
"lib": [
  "es2018",
  "dom"
]

polyfills.ts

import 'classlist.js';  // Run `npm install --save classlist.js`.
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
import 'zone.js/dist/zone';  // Included with Angular CLI.

Solution

  • I found a similar thread and I followed the solution in it then it can work well in IE 11. I use ngx-translate like this simple sample. You could refer to my files:

    package.json

    ...
      "dependencies": {
        "@angular/animations": "~9.1.0",
        "@angular/common": "~9.1.0",
        "@angular/compiler": "~9.1.0",
        "@angular/core": "~9.1.0",
        "@angular/forms": "~9.1.0",
        "@angular/platform-browser": "~9.1.0",
        "@angular/platform-browser-dynamic": "~9.1.0",
        "@angular/router": "~9.1.0",
        "@ngx-translate/core": "^11.0.1",
        "@ngx-translate/http-loader": "^4.0.0",
        "classlist.js": "^1.1.20150312",
        "rxjs": "~6.5.4",
        "tslib": "^1.10.0",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.10.2"
      },
    ...     
    

    tsconfig.json

    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "module": "esnext",
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es5",
        "lib": [
          "es2018",
          "dom"
        ]
      },
      "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true
      }
    }
    

    The result in IE 11 is like this:

    enter image description here