IE11だけがSCRIPT1046で動作しない
chrome、edgeなどは正常に動くがIEだけがエラーで起動出来ない状態になった。polyfills.tsではIE10,11でも動作するようにアンコメントとclasslist.jsをインストールしている
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** IE9, IE10 and IE11 requires all of the following polyfills. **/ import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ import 'classlist.js'; // Run `npm install --save classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ import 'core-js/es6/reflect'; ・・・・ |
原因
stylesで一時的にデバックとして使用した行が悪さをしているみたい。
|
1 2 3 4 5 6 7 8 9 10 11 |
@Component({ selector: 'app-hoge', templateUrl: './hoge.component.html', styleUrls: ['../common-hoge/common.scss'], styles: [` // .slds-button {line-height:1.4} // label {margin-bottom :0} // fieldset {display: inline-block;} `], encapsulation: ViewEncapsulation.None }) |
stylesプロパティまるごと削除でエラーが出なくなった。
|
1 2 3 4 5 6 |
@Component({ selector: 'app-hoge', templateUrl: './hoge.component.html', styleUrls: ['../common-hoge/common.scss'], encapsulation: ViewEncapsulation.None }) |
憶測
SCRIPT1046: 厳格モードでは、プロパティの複数定義は許可されませんエラーが出たがソース上は問題なかったし、もしコーディングで問題があった場合、IDEで教えてくれるのでAngularコンパイル時にどうやってるのか考えてみた。
公式の注意事項が見つからず、おそらくとしか言いようが無いが、styleUrlsプロパティとstylesは同時に使用するべきではないのだろう。tsからjsに変換されるときにtemplateUrlはURL情報からCSS情報を受取りstylesプロパティになると考えれば、stylesプロパティが２つ宣言されてしまうため「同一プロパティが複数適宜」となる。(勘です。)
chromeやedgeでは問題なく動くため原因究明までに時間がかかってしまった。修正自体は元々不要な物だったので消すだけで済んだが、ゴミが悪さをする悪い例だわさ。