각도 유성에 typescript를 디버그하는 방법

Question

Angular2의 Socially 앱에 대한 각도 유성 튜토리얼을 따랐습니다. 기본적으로 (패키지 의존성을 수정하기위한 몇 가지 수동 단계를 거친 후) 작동하지만 Chrome Dev Tools에서 클라이언트 측 코드를 디버깅 할 수 없습니다. 내 * .TS 파일의 소스로 이동하면, 내가 보는 모든 개발 도구에

module.export("default",exports.default=("<div> <ul> <li *ngFor=\"let party of parties\"> {{party.name}} <p>{{party.description}}</p> <p>{{party.location}}</p> </li> </ul> </div>")); 

다른 이상한 일들 같은 것들이다 : 내 app.ts가 비어 있습니다. 원시 접미사와 함께 html 파일이 표시됩니다 (예 : app.html! raw). ! 원시 접미어는 무엇이며 그 원인은 무엇입니까?

내 타이프 스크립트를 디버깅하려면 어떻게해야합니까?

Answer 1

질문의 일부분을 도울 수 있습니다.

사용중인 유성 버전은 언급되어 있지 않지만 버전 1.4 또는 1.4.0.1을 가정합니다. 필자는 Meteor의 이러한 버전이 Typescript 파일의 소스 맵에 문제가있는 것으로 보았습니다 (아마도 여러 단계의 추출 단계를 거쳐야 할 것입니다). 나는 버그가 어디에 있는지 정확히 알지 못한다. (Meteor 또는 Typescript 컴파일러 패키지). 여기에 하나의 문제가 있습니다 : https://github.com/barbatus/typescript/issues/23

업데이트 :이 문제는 해결되었습니다.

현재 제 제안은 1.3.x.x 버전의 Meteor로 되 돌리는 것입니다.

$ meteor create --release 1.3.5.1 Socially 

(자료 목록에 있습니다 : : https://github.com/meteor/meteor/releases)

'app.html'와 '응용 프로그램 사회적 튜토리얼 같은 경우, 가장 쉬운 옵션은 생성시 유성 자료를 지정하는 것입니다. html! raw '파일은 templateUrl과 유성 빌드 프로세스를 사용하여 문제를 해결하는 방법으로 유성 각도 컴파일러에 의해 생성됩니다. 나의 이해는 선호하는 방법은 인라인 템플릿을하거나 같은 템플릿을 가져올 수 있다는 것이다 :

// This import loads the content of the html file into 'template' 
import template from './app.html'; 

@Component({ 
    selector: 'app', 
    // Instead of templateUrl, use: 
    template,  // <--- 'template,' is syntactic sugar for: 'template: template,' 
    directives ... etc. 

가져 오기 문은 조금 특이한이며,이 마법은 모든 변환 유성 각 사전 컴파일러 HTML에 의해 달성된다 및 CSS 파일을 몇 개의 js 파일로 복사하십시오. 이상한 무엇입니까 app.html 및 app.html! raw입니다.

첫 번째 앱 폴더의 재미있는 문자가 버그 인 것 같습니다. 유성은 컴퓨터 이모티콘에 넣기를 시도하지만 가끔 잘못 처리됩니다. Chrome, ChromeDevTools 또는 Meteor 버그인지 잘 모르겠습니다. (개인적으로 나는 이모티콘을 버리길 바란다.)