IE assignment to read only properties is not allowed in strict mode

[PenAndPapers]

keep getting this error in IE and Mac safari and iOS devices.

in pageheader it only display {{$ctrl.title}} not the value, any idea about this?

Games.js

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import liveGamesViewComponent from './liveGamesView.component';

let liveGamesViewModule = angular.module('liveGamesView', [
    uiRouter
])
.component('liveGamesView', liveGamesViewComponent)
.config(($stateProvider) => {
    "ngInject";
    $stateProvider
        .state('livegames', {
            url: '/livegames',
            component: 'liveGamesView'
        });
})
.name;
export default liveGamesViewModule;

Games.html

<header>
    <page-header title="Games" bg-class="games"></page-header>
</header>
<main class="livegames">
</main>

PageHeader.component.js

import template from './pageHeader.html';
import controller from './pageHeader.controller';
import './pageHeader.less';
let pageHeaderComponent = {
    restrict: 'E',
    bindings: {
        title: '@',
        bgClass: '@'
    },
    template,
    controller
};
export default pageHeaderComponent;

Pageheader.html

<div class="page-header {{ $ctrl.bgClass }}">
    <div class="bg-mask"></div>
    <div class="page-title">
        <h1>{{ $ctrl.title }}</h1>
    </div>
</div>

Pageheader.js

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import pageHeaderComponent from './pageHeader.component';

let pageHeaderModule = angular.module('PageHeader', [
    uiRouter
])
.component('nblPageHeader', pageHeaderComponent)
.name;

export default pageHeaderModule;

[bakasmarius]

My guess is it might be because of <div class="page-header {{ $ctrl.bgClass }}"> Have you tried replacing it with <div class="page-header" [ngClass]="$ctrl.bgClass"> ?

[fesor]

@PenAndPapers, I closing this issue since advice of @bakasmarius is correct. Use ngClass directive for this kind of operations.