angolare 2 Quickstart - componente my-app non caricare

Cercando di imparare angolare così ho iniziato con il tutorial quickstart per il dattiloscritto nel loro sito web (https://angular.io/guide/quickstart)angolare 2 Quickstart - componente my-app non caricare

sto lavorando su Ubuntu 14.04.

Ho seguito ogni passaggio e alla fine non ricevo errori, ma il componente non viene caricato. Invece, l'unica cosa che vedo è "Caricamento in corso ..." invece del componente principale "mia-app".

what i see in my browser

il index.html:

<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

app/app.component.ts:

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1>' 
}) 
export class AppComponent { }

vedo alcun punto in mostra il resto del file di configurazione perché sono esattamente come quelli del tutorial. L'unico cambiamento è che ho cambiato tsconfig.json a

"target": "es6",

perché non ha funzionato al contrario.

Quale può essere il problema? Perché non sta caricando il mio componente principale?

Edit: questi sono gli errori nel mio console del browser:

2 http://localhost:3000/node_modules/systemjs/dist/system.src.js Failed to load resource: the server responded with a status of 404 (Not Found) 

systemjs.config.js:46 Uncaught TypeError: System.config is not a function 

http://localhost:3000/app/ Failed to load resource: the server responded with a status of 404 (Not Found) 

app:18 Not Found: http://localhost:3000/app 
    Error loading http://localhost:3000/app(anonymous function) @ app:18 

http://localhost:3000/app/ Failed to load resource: the server responded with a status of 404 (Not Found)

fonte

2016-06-10 Ziv Cohen

Penso che sia necessario eseguire il bootstrap dell'applicazione – juvian

Aprire la console e controllare il messaggio err – Zen

Quale ID si usa? –

Credo che ti sei dimenticato di aggiungere main.ts (fare riferimento al punto 3 da esercitazione - https://angular.io/guide/quickstart)

fonte

2016-06-10 16:13:13 Sanket

no ... l'ho aggiunto. ziv @ ziv-K55A: ~/angular2-quickstart/app $ cat main.ts importazione {bootstrap} da '@ angular/platform-browser-dynamic'; importare {AppComponent} da './app.component'; bootstrap (AppComponent); –

Che dire di systemjs.config.js?Se tutti i file sono presenti, controllare la presenza di errori nella console del browser. – Sanket

Ho modificato il post originale e aggiunto gli errori della console. i file ci sono, ma sembra esserci un problema con systemjs.config.js .... –

ho avuto tipo di problema simile ed è stato finalmente in grado di trovare dove si trova il problema.

Nel mio caso, quando mi sono imbattuto npm start errore console del browser era XHR error (404 Not Found) loading http://localhost:3000/app/main.js .ho capito che mi manca main.js, ma ho /app/main.ts.

I file di dattiloscritto (.ts) non sono stati compilati in file JS (.js). Quindi è stato trovato un carattere aggiuntivo "\" alla fine del file tsconfig.json. Non era visibile in explorer o in Atom, fino al Terminale digitato tsconfig e premuto il tasto Tab per il completamento automatico. Ha mostrato che c'è un carattere aggiuntivo alla fine del nome del file. Quindi con questo comando $ mv tsconfig.json\ tsconfig.json, il nome è stato modificato. E poi con l'avvio di npm, ha funzionato bene.

Quindi si prega di controllare tutti i nomi dei file nella console. Spero che anche il tuo funzionerà bene.

fonte

2016-11-07 09:29:11 SayedRakib

angolare 2 Quickstart - componente my-app non caricare

risposta

Problemi correlati