angular2 한글 비정상 출력

import {Component} from 'angular2/core';
import {CoursesComponent} from  './courses.component'import {AuthorsComponent} from './authors.component'
@Component({
    selector: 'my-app',
    template: `<h1>{{ title }} </h1>     <input type="text" [value]="title" (input)="title =$event.target.value" />        <input type="button" (click)="title = ''" value="Clear" />        Preview:{{ title }}    `,
    directives: [CoursesComponent, AuthorsComponent]
})
export class AppComponent {
    title = "Angular App";

}

ㅎㅏㄴㄱㅡㄹ?
  Preview:ㅎㅏㄴㄱㅡㄹ?

이런식으로 결과가 나온다;

좀더 검색해보니 자소분리현상이라고하는데 운영체제단에서 나타나는 문제같다.

우선 넘어가고 차후에 해결방법을 찾아보겠다.

<input type="text" [(ngModel)]="title"/>


이걸쓰면 그나마 자소분리현상은 없어지는데 문자가 중복입력되는 현상이 나타난다.










import {Component} from 'angular2/core';
import {CoursesComponent} from  './courses.component'import {AuthorsComponent} from './authors.component'
@Component({
    selector: 'my-app',
    template: `<h1>{{ title }} </h1>         <input type="text" [value]="title" (input)="title = $event.target.value" />

        <input type="text" [(ngModel)]="title"/>     

        <input type="text" bindon-ngModel="title"/>

    <input type="button" (click)="title = ''" value="Clear" />        Preview:{{ title }}    `,
    directives: [CoursesComponent, AuthorsComponent]
})
export class AppComponent {
    title = "Angular App";

}

2개 인풋 태그는 적어도 자소분리현상은 일어나지 않는다.