2016-02-27 20 views
6

olsun.açısal 2 uygulama yüklemez ama benim typescript açısal 2 testi uygulaması beklendiği gibi yüklenmez yük zaman hiç hata

Hep endeks html dosyasında my-app ne "Yükleniyor ..." bölümüne bakın.

Ben de Bowser konsolunda herhangi bir hata alıyorum:/

Herkes hata kabul ediyor?

ENDEKSİ

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

    <title>test</title> 
    <script src="~/lib/es6-shim.js"></script> 
    <script src="~/lib/es6-promise.js"></script> 
    <script src="~/lib/system-polyfills.js"></script> 
    <script src="~/lib/angular2-polyfills.js"></script> 
    <script src="~/lib/system.js"></script> 
    <script src="~/lib/Rx.js"></script> 
    <script src="~/lib/angular2.js"></script> 
    <script src="~/lib/http.dev.js"></script> 
    <script src="~/lib/router.dev.js"></script> 
    <script> 
      System.config({ 
       packages: { 
        app: { 
         format: 'register', 
         defaultExtension: 'js' 
        } 
       } 
      }); 
      System.import('app/main') 
        .then(null, console.error.bind(console)); 
    </script> 
</head> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html> 

main.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/> 

import {provide} from 'angular2/core'; 
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {AppComponent} from './app.component' 

bootstrap(AppComponent).catch(err => console.error(err)); 

app.component.ts

import {Component} from 'angular2/core'; 
@Component({ 
    selector: 'my-app', 
    // providers: [...FORM_PROVIDERS], 
    // directives: [...ROUTER_DIRECTIVES, RouterActive], 
    pipes: [], 
    styles: [], 
    template: ` 
     <h1>Hello {{ name }}</h1>  
    ` 
}) 
export class AppComponent { 
    angularclassLogo = 'assets/img/angularclass-avatar.png'; 
    name = 'Angular 2 Webpack Starter'; 
    url = 'https://twitter.com/AngularClass'; 
    constructor() { 

    } 
} 
+0

kod Tamam görünüyor, beta.7 ince çalışıyor. dosyalar .js için? derlenmiş olsun senin ts, ayrıca – Abdulrahman

+0

kodunuzu perfact gibi görünüyor sadece main.ts içinde bootstrap (..) önce console.log koyabilirsiniz gelmez. @Abdulrahman ile aynı kod sistemimde çalışıyor. dosyayı doğru bir şekilde yüklemek için konsolunuzu tekrar kontrol edin? –

+0

Konsola baktım. hiçbir şey yok ... – Elisabeth

cevap

1

harika Ang okuyan deneyin ular2 Plunker https://angular.io/resources/live-examples/quickstart/ts/plnkr.html (typescript) Sen typescript kullanıyorsunuz, ancak HTML dahildir ve düzgün systemjs yapılandırılmış yok

: Ayrıca

// Missing typescript transpiler 
<script src="https://code.angularjs.org/tools/typescript.js"></script> 

<script> 
System.config({ 
    transpiler: 'typescript',       // <-- missing! 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    packages: {'app': {defaultExtension: 'ts'}} // <-- you have bad extension 
}); 
System.import('app/main')    // <-- main.ts should be inside 'app' folder! 
     .then(null, console.error.bind(console)); 
... 
</script> 

, ben tilde kullanmak için ok sanmıyorum Komut dosyasının src özniteliğinde ~ karakter.

GÜNCELLEME

zaten .ts kod .js içine transpiled varsa, deneysel dekoratörler ile derlenmiş emin olun etkin - senin tsconfig.json buna benzer olmalıdır:

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "experimentalDecorators": true 
    } 
} 
+0

Neden index.html dosyasında typescript eklemeliyim?js dosyaları ve bu .js dosyaları systemJS tarafından dahil! Bir asp.net .cshtml dosyası kullandığım için tilde izin verilir. – Elisabeth

+0

Bu, ilk mesajınızda kaçırdığım önemli bir imge. Cevabımı başka bir tahmin ile güncellendi. – mseimys

+0

Bunu bende başka bir transpile istisnası var (zaten var ;-)). Ama hatayı buldum. Transpile hedef klasörümü temizledim ve her şeyi yeniden derledim sonra tekrar çalıştı? Garip ... – Elisabeth

1

Şablonumda bir sorun vardı. Mobx ve ng2-mobx uygulamasını bir uygulamadan kaldırdım, ancak şablondan *mobxAutorun'u kaldırmayı unuttum. Direktifin kaldırılması işe yaradı.

(Görünüşte Angular şablonda yer alan herhangi bir hata göstermiyor. Bu aslında bir özellik olabilir, böylece başarısız olan bir ngI'niz varsa, yalnızca bir hata göstermek yerine false olarak düşünülür. Bu davranışı değiştirmek mümkün olup olmadığını bilmiyorum.) me.I bile benim kurulum üzerinde denedim için