non riescono a individuare il template html del comando importato in Angular2

Question

Stavo lavorando a una demo Angular2 con più componenti. La demo bootstraps con AppComponent, dove ho importato altri componenti nel template html di AppComponent. Ho avuto successo nell'impostare la demo e vedere il contenuto di AppComponent, ma non è riuscito a caricare altri componenti.

Ecco il codice di esempio dei miei componenti angular2

app.component.html

<div id="map"> 
    <navigator></navigator> 
</div> 

app.component.ts

import {Component, View} from 'angular2/core'; 
import {NavigatorComponent} from '../components/navigator/navigator.component' 

@Component({ 
    selector: 'app' 
}) 
@View({ 
    templateUrl: './app/app.component.html', 
    directives: [NavigatorComponent] 
}) 
export class AppComponent { } 

navigator.component.html

<input type="text"> 

navigat or.component.ts

import {Component, View} from 'angular2/core'; 

@Component({ 
    selector: 'navigator' 
}) 
@View({ 
    templateUrl: './components/navigator/navigator.component.html' 
}) 
export class NavigatorComponent { } 

Quando ho creato il server e cercato di vedere l'applicazione, ho avuto il seguente errore

"NetworkError: 404 Not Found - http://localhost:3000/components/navigator/navigator.component" 

e

Error: XHR error (404 Not Found) loading http://localhost:3000/components/navigator/navigator.component 
Error loading http://localhost:3000/components/navigator/navigator.component as "../components/navigator/navigator.component" from http://localhost:3000/app/app.component.js 

Ovviamente, il server ha cercato trova un navigator.component, ma non esiste. Tuttavia, quando ho provato http://localhost:3000/components/navigator/navigator.component.html, riesco a vedere la pagina con una casella di testo.

Quindi il problema sembrava essere l'estensione html mancante, ma non avevo idea di come fosse successo.

Apprezzerò qualsiasi suggerimento e risposta per risolvere il problema. Grazie in anticipo.

---

Se si vuole provare pienamente il bug, si prega di andare a pronti contro termine del progetto (https://github.com/haoliangyu/angular2-leaflet-starter) ed effettuare le seguenti operazioni:

1. rimuovere il commento della linea 12 a public_src/app/app.component .TS

2. istituito l'applicazione

3. andare a localhost: 3000 e controllare l'errore

---

Aggiornamento:

Questo problema è stato risolto resistendo l'altro componente nella configurazione SystemJS, come

System.config({ 
    defaultJSExtension: true, 
    packages: { 
     'app': { 
      format: 'register' 
     }, 
     'components/navigator': { 
      format: 'register' 
     } 
    } 
}); 

Questo ha aiutato l'app a localizzare altri componenti :)

Answer 1

Il problema non è che non riesce a trovare il file modello. Ma non è in grado di caricare il navigator.component.js.

Si sta tentando di caricarlo da http://localhost:3000/components/navigator/navigator.component, ma dovrebbe essere caricato dall'app "mappa", ergo: http://localhost:3000/app/components/navigator/navigator.component.js. L'estensione js verrà aggiunta dall'estensione predefinita impostata nella configurazione di SystemJS.

La ragione per l'errore va via dopo si commento la linea 12 in app.component.ts è che anche se l'istruzione import del navigator.component.ts rimane nel codice, il compilatore dattiloscritto non aggiungerà alla produzione effettiva, perché la classe non è usato nel file corrente.

Non ho potuto installare il tuo progetto, perché sembra che tu abbia già apportato alcune modifiche. Ma credo che la correzione per questo è di cambiare il percorso di importazione del navigator.component all'interno del app.component.ts: Avviso

import {NavigatorComponent} from './../components/navigator/navigator.component' 

come ho anteposto la cartella corrente ./

---

Meglio dovrebbe essere quello di aggiungere sia un tag href di base nel vostro index.html:

<base href="http://localhost/app/"> 

o per servire il vostro sito web dalla cartella app in suc h un modo in cui http://localhost si riferisce effettivamente alla cartella dell'app e non al suo genitore