Aplikacja kątowa 2 nie ładuje się, ale nie pojawiają się żadne błędy

Po załadowaniu aplikacji testowej do maszynopisu kątowego 2 nie ładuje się zgodnie z oczekiwaniami.Aplikacja kątowa 2 nie ładuje się, ale nie pojawiają się żadne błędy

Zawsze widzę "Ładowanie ...", co jest z mojej aplikacji w pliku html indeksu.

Ja też się nie błędy w konsoli: Bowser/

Każdy widzi ten błąd?

INDEKS

<!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() { 

    } 
}

Źródło

2016-02-27 Elisabeth

Kod wygląda na prawidłowy. Nawet wypróbowałem go na mojej instalacji, działa dobrze na wersji beta.7. czy twoje pliki .ts zostaną skompilowane do pliku .js ?, możesz również umieścić konsolę.log tuż przed bootstrap (..) w main.ts – Abdulrahman

Twój kod wydaje się być perfakt. tak samo, jak kodowanie @Abdulrahman, działa poprawnie na moim systemie. ponownie sprawdź, czy twoja konsola prawidłowo ładuje plik? –

Zerknąłem na konsolę. nie ma nic ... – Elisabeth

Spróbuj studiuje wielką Ang ular2 Plunker https://angular.io/resources/live-examples/quickstart/ts/plnkr.html (maszynopis)

Używasz maszynopis, ale nie mają wliczone w HTML i prawidłowo skonfigurowany w systemjs:

// 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>

Również nie sądzę, że jest OK, aby użyć tyldy ~ znak w atrybucie skryptu src.

UPDATE

Jeśli masz już kod .ts transpiled do .js, upewnij się, że został on skompilowany z dekoratorów eksperymentalnych włączona - Twój tsconfig.json powinien być podobny do tego:

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

Źródło

2016-02-27 11:25:16 mseimys

Dlaczego mam dołączyć maszynopis do pliku index.html? Przenoszę pliki .ts do.Pliki js i pliki .js zostały dołączone przez systemJS! Tilda jest dozwolona, ponieważ używam pliku asp.net .cshtml. – Elisabeth

To jest ważna informacja, którą przegapiłem w twoim pierwszym poście. Zaktualizowałem moją odpowiedź z innym domysłem. – mseimys

Mam to jeszcze zbyt, dostanę transpile wyjątek (który już mam ;-)). Ale znalazłem błąd. Czy wyczyściłem folder docelowy transpile i skompilowałem wszystko, a potem znów działało ?! Dziwny... – Elisabeth

Wystąpił problem w moim szablonie. Usunąłem Mobx i ng2-mobx z aplikacji, ale zapomniałem usunąć szablon z *mobxAutorun. Usunięcie dyrektywy sprawiło, że działało.

(Wygląda na to, że Angular nie pokazuje żadnych błędów, jeśli są one w szablonie.To może faktycznie funkcja, tak, jeśli masz NIFIF, który się nie powiedzie, to po prostu uznają, że jeśli jako false, zamiast pokazywać błąd. Nie wiem, czy można zmienić to zachowanie.)

Źródło

2017-01-27 15:59:13

Aplikacja kątowa 2 nie ładuje się, ale nie pojawiają się żadne błędy

Odpowiedz

Powiązane problemy