CODEWITHSUNDEEP
javascriptangularcross-browserinternet-explorer-11
Jens Habegger
Jens Habegger

Reputation: 5446

Angular2 data not binding in IE11

The application in question is loading fine in the latest versions of Chrome, FF and Edge. When attempting to load it with IE11 it seems to fail at creating the appropriate data bindings. The internal data is being processed correctly from a websocket connection, but no data binding takes place and the template remains empty.

The only actual error hint I'm getting is a "HTML1506 - Unexpected Token." message. It is described to occur at the tag loading the actual webint.js.

The application is built with the following configuration:

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "./",
        "rootDir": "src"
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

webpack.config.json

var CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: './src/app/boot.ts',
  output: {
    filename: './dist/resources/webint.js'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  module: {
    loaders: [
      { 
            test: /\.ts$/, 
            loader: 'ts-loader',
            exclude: [/node_modules\/(?!(ng2-.+))/]
        }
    ]
  },
  node: {
      tls: 'empty',
      fs: 'empty'
    },
    plugins: [            
        new CopyWebpackPlugin([
            { from: 'dist_template', to: 'dist', force: true },
        ])
    ]    
}

package.json

{
  "name": "vwebinterface",
  "version": "0.0.1",
  "description": "Interface accessing the websocket API",
  "scripts": {
    "build": "webpack --progress --profile --colors --display-error-details --display-cached",
    "watch": "webpack --watch --progress --profile --colors --display-error-details --display-cached",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "UNLICENSED",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.2",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "core-js": "^2.4.0",
    "es6-promise": "3.2.1",
    "es6-shim": "0.35.1",
    "moment": "^2.14.1",
    "primeng": "1.0.0-beta.9",
    "primeui": "4.1.12",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.31",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "clean-webpack-plugin": "0.1.9",
    "concurrently": "2.2.0",
    "copy-webpack-plugin": "3.0.1",
    "lite-server": "2.2.2",
    "ts-loader": "0.8.2",
    "typescript": "1.8.10",
    "typings": "1.3.1",
    "webpack": "1.13.1"
  }
}

index.html

<!DOCTYPE html>
<html>

  <head>
    <title>Virtual Channel Server</title>

    <link rel="stylesheet" type="text/css" href="resources/bootstrap/theme.css" />
    <link rel="stylesheet" type="text/css" href="resources/icons/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="resources/css/primeui.css" />
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="resources/css/bootflat.css">
    <link rel="stylesheet" type="text/css" href="resources/css/webinterface.css">

    <script src="resources/libs/ieCompat/shims_for_IE.js"></script>
    <script src="resources/libs/ieCompat/system-polyfills.js"></script>
    <script src="resources/libs/ieCompat/es6-shim.js"></script>

    <script src="resources/libs/core/core.js"></script>

    <script src="resources/libs/zone.js/zone.js"></script>
    <script src="resources/libs/reflect-metadata/Reflect.js"></script>
    <script src="resources/libs/systemjs/system.js"></script>    
    <script src="resources/libs/jquery/jquery.js"></script>
    <script src="resources/libs/jquery/jquery-ui.js"></script>
    <script src="resources/libs/primeUI/primeui.js"></script>
    <script src="resources/libs/xml2json/xml2json.js"></script>
    <script src="resources/libs/deep-diff/deep-diff.js"></script>   
  </head>

  <body>
    <ng-channels>Loading...</ng-channels>
  </body>
  <script src="resources/webint.js"></script>
</html>

The index.html contains all possible IE shims I've attempted to use in differenct configurations with no actual effect.

Upvotes: 2

Views: 1225

Answers (1)

smyk
smyk

Reputation: 371

You could try to create a local field and update it with setTimeout inside the component. Chances are, it updates bot the binding you created and values received from the web socket. If it does, you might want to have a look at the following issue I created some time ago. There is also a solution proposal there.

Upvotes: 1

Related Questions