L'applicazione angolare 2 non viene caricata ma non si verificano errori

Quando si carica l'applicazione di prova angolare 2 del dattiloscritto non viene caricata come previsto.L'applicazione angolare 2 non viene caricata ma non si verificano errori

Vedo sempre "Caricamento in corso ..." ciò che viene dalla mia app nel file html dell'indice.

Ho anche errori nella console Bowser:/

Chiunque è vedere l'errore?

INDICE

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

    } 
}

fonte

2016-02-27 Elisabeth

Il codice mi sembra a posto. L'ho provato anche sul mio setup, funziona bene su beta.7. i tuoi file .ts vengono compilati con .js?, potresti anche mettere un console.log appena prima di bootstrap (..) in main.ts – Abdulrahman

il tuo codice sembra essere perfetto. come @Abdulrahman il tuo codice funziona correttamente sul mio sistema. controllare di nuovo la tua console per caricare correttamente il file? –

Ho guardato la console. non c'è niente ... – Elisabeth

provare a studiare il grande Ang ular2 Plunker https://angular.io/resources/live-examples/quickstart/ts/plnkr.html (dattiloscritto)

Si utilizza tipografico, ma non lo avete incluso in HTML e correttamente configurato in 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>

Inoltre, non credo che è ok per utilizzare tilde ~ nell'attributo src dello script.

UPDATE

Se avete già il vostro codice .ts transpiled in .js, assicurarsi che è stato compilato con decoratori sperimentali abilitato - il tuo tsconfig.json dovrebbe essere simile a questo:

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

fonte

2016-02-27 11:25:16 mseimys

Perché dovrei includere typescript nel mio file index.html? Traspare i file .ts in.i file js e quei file .js sono stati inclusi da systemJS! La tilde è consentita perché uso un file asp.net .cshtml. – Elisabeth

Questa è una parte importante delle informazioni che ho perso nel tuo post iniziale. Aggiornato la mia risposta con un'altra ipotesi. – mseimys

Anche in questo caso avrei ricevuto un'eccezione transpile (che ho già ottenuto ;-)). Ma ho trovato l'errore. Ho cancellato la mia cartella di destinazione transpile e ricompilato tutto e poi ha funzionato di nuovo ?! Dispari... – Elisabeth

Ho riscontrato un problema nel mio modello. Ho rimosso Mobx e ng2-mobx da un'app, ma ho dimenticato di rimuovere *mobxAutorun dal modello. Rimozione della direttiva ha funzionato.

(Apparentemente Angolare non mostra alcun errore se si trova nel modello. Potrebbe trattarsi di una funzionalità, in modo che se si ha un ngIf che non riesce, si considererà solo come falso, invece di mostrare un errore. Non so se è possibile modificare questo comportamento.)

fonte

2017-01-27 15:59:13

L'applicazione angolare 2 non viene caricata ma non si verificano errori

risposta

Problemi correlati