Angular2 Binding Applies Only After Mouse Movement

I'm a new angular2 development and currently facing a rendering issue with my application. I use @angular@2.0.0-rc.1 for my app and router-deprecated@2.0.0-rc1 for my routing, when

Solution 1:

The order in which you include the JS files is important. This issue happened when I didn't.

<script src="/lib/shim.min.js"></script>
<script src="/lib/system.js"></script>
<script src="/lib/system-polyfills.js"></script>
<script src="/lib/Reflect.js"></script>
<script src="/lib/zone.js"></script>

Solution 2:

As mentioned by bryanm, the order of the js files is important and the placement of those script tags also matters. In my environment with angular2.rc.4, the order was

<script src="node_modules/es6-shim/es6-shim.js">
<script src="node_modules/reflect-metadata/Reflect.js">
<script src="node_modules/systemjs/dist/system.src.js">
<script src="node_modules/zone.js/dist/zone.js">

It has to be placed at the end of the body tag just above loading the systemjs config script.