state transition error in internet explorer

Question

We are developing a web app with angular 2.4.9. On the start site we have a button with a link to the login page:

    <div *ngIf="!hasAccount" class="col-xs-12 col-md-6 col-sm-6">
      <a routerLink="/login" class="loginBtn btn btn-default btn-raised" [ngClass]="{disabled: loading}">Login</a>
    </div>

This works in all browsers except IE11 under windows 10. In IE11 the login page does not open and we get this error message from zone.ts on the console:

Error: eventTask 'undefined.addEventListener:transitionend': can not transition to 'running', expecting state 'scheduled', was 'notScheduled'.

Zone.ts code where the error is thrown:

    _transitionTo(toState: TaskState, fromState1: TaskState, fromState2?: TaskState) {
  if (this._state === fromState1 || this._state === fromState2) {
    this._state = toState;
    if (toState == notScheduled) {
      this._zoneDelegates = null;
    }
  } else {
    debugger;
    throw new Error(
        `${this.type} '${this.source}': can not transition to '${toState
                                    }', expecting state '${fromState1}'${fromState2 ?
            ' or \'' + fromState2 + '\'' :
            ''
            }, was '${this._state}'.`);
  }
}

After searching and digging into the code we are currently of ideas what to do and wanted to ask if someone has an idea what could cause this problem.

P.S. These are the node_modules we are using in our web app:

    "dependencies": {
        "@angular/common": "^2.4.9",
        "@angular/compiler": "^2.4.9",
        "@angular/core": "^2.4.9",
        "@angular/forms": "^2.4.9",
        "@angular/http": "^2.4.9",
        "@angular/platform-browser": "^2.4.9",
        "@angular/platform-browser-dynamic": "^2.4.9",
        "@angular/router": "3.4.9",
        "@types/file-saver": "0.0.0",
        "@types/hammerjs": "^2.0.34",
        "angular2-localstorage": "github:marcj/angular2-localstorage",
        "angular2-progressbar": "^0.5.1",
        "angular2-uuid": "^1.1.1",
        "arrive": "^2.3.1",
        "bootstrap": "^3.3.7",
        "bootstrap-material-design": "^0.5.10",
        "bootstrap-sass": "^3.3.7",
        "chart.js": "^2.5.0",
        "core-js": "^2.4.1",
        "date-input-polyfill": "^2.12.0",
        "dragula": "^3.7.2",
        "file-saver": "^1.3.3",
        "flag-icon-css": "^2.8.0",
        "hammerjs": "^2.0.8",
        "intl": "^1.2.5",
        "jquery": "^3.1.1",
        "lodash": "^4.17.4",
        "lodash-es": "^4.17.4",
        "material-design-icons": "^3.0.1",
        "materialize-css": "^0.98.0",
        "moment": "^2.15.1",
        "ng2-bootstrap": "1.3.3",
        "ng2-charts": "^1.5.0",
        "ng2-datetime-picker": "^0.14.10",
        "ng2-dragula": "1.3.0",
        "ng2-file-upload": "^1.2.0",
        "ng2-mqtt": "icanos/ng2-mqtt#f47c12d",
        "ng2-select": "^1.2.0",
        "qrious": "^2.2.0",
        "roboto-fontface": "^0.7.0",
        "rxjs": "5.0.3",
        "ts-helpers": "^1.1.2",
        "web-animations-js": "^2.2.2",
        "zone.js": "^0.7.7"
    },
    "devDependencies": {
        "@angular/cli": "^1.0.0-rc.1",
        "@angular/compiler-cli": "2.4.9",
        "@types/hammerjs": "^2.0.34",
        "@types/jasmine": "^2.5.38",
        "@types/lodash": "4.14.52",
        "@types/node": "7.0.5",
        "codelyzer": "2.0.0",
        "jasmine-core": "2.5.2",
        "karma": "~1.4.1",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-coverage-istanbul-reporter": "^0.2.0",
        "karma-jasmine": "^1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "karma-remap-istanbul": "^0.2.1",
        "node-sass": "^4.5.0",
        "protractor": "5.1.1",
        "ts-node": "~2.0.0",
        "tslint": "4.5.1",
        "typescript": "2.0.3"
    }