JSFiddle에서 Angular2 - .ts 파일을 포함하는 방법

jsFiddle을 처음 사용하고 있습니다. 내 파일을 모두 포함시키는 법을 모르겠습니다. 현재 바이올린을 실행하면 404가 반환됩니다. 로컬 ts 파일을 연결하여 실행하려면 어떻게해야합니까?JSFiddle에서 Angular2 - .ts 파일을 포함하는 방법

내 바이올린은 here입니다. 어떤 도움이라도 대단히 감사하겠습니다. 여기

angular2-polyfills.js:1243 Error: XHR error (404 NOT FOUND) loading https://fiddle.jshell.net/Unnati/kje2sr61/show/app/main.ts (…)

출처

2016-12-14 Unnati

대신에 플 런커를 사용 하시겠습니까? – echonax

네, 괜찮습니다. – Unnati

아래 예제를 제공했습니다. 그것은 당신의 필요에 맞습니까? – echonax

을 plunker에 Angular2 스타터 프로젝트입니다 :

<script>document.write('<base href="' + document.location + '" />');</script> 
<script> 
    System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: {'app': {defaultExtension: 'ts'}} 
    }); 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script>

이 반환 http://plnkr.co/edit/F5lDxrDUFlNQQZimUhk9?p=preview

그것은 CONFIGS하는 간단한 AppComponent

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h2>Hello World</h2>`, 
    providers: [] 
}) 
export class App implements ngAfterViewInit{ 
    name:any; 

    constructor() {} 

    ngAfterViewInit(){ 
    } 
}

모든 system.config 유형 부트 스트랩 것 세트. 그것을 변경하고 나중에 사용하기 위해 저장하려는 경우 화면 상단의 "포크"를 클릭하십시오.

업데이트 : Plunker 지금 각도 커널 2.0.x에 대한 기본 템플릿 옵션이

당신은 화살표에게 뉴의 오른쪽을 클릭 -> 각도 -> 커널 2.0.x

출처

2016-12-14 09:55:56 echonax

필자는 위에 제공된 plunker 링크를 포크했다. 편집 할 때마다 새 탭에서 결과를 열어서 코드 작성시 속도를 늦추고있다. –

@SiddharthSharma는 zone.js 버전 https://groups.google.com/forum/#!topic/plunker/cPEILSWfjS4의 버그 인 것 같습니다. 0.6.25로 업그레이드했습니다. – echonax

누군가 새 탭에서 열리는 코드 결과 문제에 직면 한 경우 plunkr의 설정 탭 하단에서 자동 저장을 비활성화하여 일시적으로 수정할 수 있습니다. 이 후에는 수동으로 저장해야합니다. –

당신은 드롭 다운을 클릭 할 수 있습니다 NEW를 클릭하고 Angular를 클릭하면 angular4 템플릿이 자동으로 생성됩니다.

출처

2017-07-21 09:50:48

JSFiddle에서 Angular2 - .ts 파일을 포함하는 방법

답변

관련 문제