Il file 'app / hero.ts' non è un errore del modulo nella console, dove archiviare i file delle interfacce nella struttura delle directory con angular2?

Sto facendo il angular2tutorial a questo indirizzo: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html Ho messo l' herointerfaccia in un singolo file sotto la appcartella, nella console ho questo errore :

app/app.component.ts(2,20): error TS2306: File 'app/hero.ts' is not a module.
[0] app/hero-detail.component.ts(2,20): error TS2306: File 'app/hero.ts' is not a module.

Se inserisco il mio file di interfaccia in una cartella Hero, l'errore scompare, questo non è menzionato nella documentazione, cosa c'è di sbagliato nella mia importazione ?

La mia direttiva di importazione (alla base dei file dei componenti) in entrambi app.components.tse hero-detail.component.ts:

import {Component} from 'angular2/core';

import {Hero} from './hero';

Devo sostituire la mia direttiva di importazione con: import {Hero} from './'; o semplicemente inserire il codice in una cartella Hero ?

Prova a riavviare l'editor in cui stai scrivendo il codice (codice VS o Sublime). Compilare ed eseguirlo di nuovo. Ho fatto lo stesso e ha funzionato.

Questo succede quando aggiungi una nuova classe al di fuori del tuo editor o continui a eseguire il tuo servizio di selezione angolare. In realtà il tuo editor o il comando 'ng serve' potrebbero non essere in grado di trovare i file appena creati.

Ho avuto lo stesso errore nello stesso tutorial perché avevo dimenticato la parola chiave export per l'interfaccia.

probabilmente hai dimenticato di aggiungere "Esporta" nella definizione della classe.

->

export class Hero {
     id: number;
     name: string;
   }

Inoltre, prova con

export {Hero} 

in fondo alla tua classe hero.ts e, infine, controlla il nome del file delle lettere maiuscole e il nome della classe.

L'errore è perché non hai salvato i file dopo averli creati.

Prova a salvare tutto il file facendo clic su "Salva tutto" nell'Editor.

Puoi vedere il numero di file che non vengono salvati guardando sotto il menu "File" mostrato usando il colore blu.

Il riavvio del ng serveprocesso ha funzionato per me

Per le persone che ottengono lo stesso errore su Stackblitz

Troverai una scheda Dipendenza sulla barra laterale sinistra dell'IDE. Basta fare clic sul pulsante di aggiornamento accanto ad esso e sarai a posto.

Come ho sperimentato ogni volta che aggiungo un nuovo file al mio progetto, devo fermarmi e riavviare il server ng.

Il tutorial ti ha messo tutti i componenti e il file di interfaccia nella stessa directory, quindi l'importazione relativa './hero'se vuoi spostarlo altrove devi cambiarlo.

Modifica: il codice potrebbe ancora funzionare ma il compilatore si lamenterà perché stai tentando un'importazione da una posizione errata. Modificherei semplicemente l'importazione in base alla tua struttura. Per esempio:

app/
  component1/
    component1.ts
  compnent2/
    component2.ts
  hero.ts

Vorrei semplicemente cambiare l'importazione in import {Hero} from '../hero'.

Questo errore è causato dal fallimento del ng serveservizio di prelevare automaticamente un nuovo file aggiunto. Per risolvere questo problema, è sufficiente riavviare il server.

Sebbene la chiusura della riapertura dell'editor di testo o dell'IDE risolva questo problema, molte persone non vogliono affrontare tutto lo stress della riapertura del progetto. Per risolvere questo problema senza chiudere l'editor di testo ...

Nel terminale in cui è in esecuzione il server,

• Premere ctrl+Cper arrestare il server quindi,
• Riavvia il server: ng serve

Dovrebbe funzionare.

Ho affrontato lo stesso problema.

Ho riavviato il mio server e funziona benissimo. Sembra un bug.

riavvia il servizio

Ho avuto lo stesso problema. Per cercare l'errore, ho selezionato l'errore e ho fatto accidentalmente un CTRL + C (che significa copiare), che ha terminato il servizio. Al riavvio di ng serve, l'errore è scomparso :). A volte i refusi e le dita grasse aiutano ;-)

Problema dell'editor. Quando crei nuovi file che non utilizzano l'interfaccia della riga di comando angolare, assicurati di andare su File> Salva tutto (codice VS) per informare l'editor delle tue nuove modifiche. Quindi eseguire nuovamente "ng serve --open". Ha risolto il mio. Spero che sia d'aiuto

Ho riscontrato lo stesso problema in VSC. Riavvia l'editor e riavvia l'applicazione. Ha funzionato bene.

Ho scoperto che non solo dovevo riavviare Visual Studio Code ma anche il processo del server dei nodi prima di poter ottenere una buona compilazione.

Stavo affrontando lo stesso problema, ho provato a riavviare il mio server, riaprendo l'editor ma il riavvio del computer ha fatto la magia.

PS: ho riscontrato un problema su un computer Windows e si è verificato un problema quando ho spostato il modulo in una nuova cartella.

Ho avuto un problema simile. Ho scritto eroe invece di Hero

importa quanto segue:

import { Hero } from '../Hero';

A volte questo errore si verifica quando il file .ts non viene salvato. Quindi assicurati di salvare tutti i file nel progetto, altrimenti prova a riavviare l'editor.

Apri il prompt dei comandi, vai alla cartella dell'app, ad es D:\angular-tour-of-heroes\src\app

Quindi creare un nuovo file utilizzando il seguente comando:

ng generate class hero

Questo creerà un hero.tsfile. Quindi è possibile incollare il codice di esportazione e l'errore scompare.

Dovresti salvare tutti i file. Ad esempio html, css, component.ts, module, file modello. Apri ogni file e premi ctrl-S. Questo ha funzionato per me

Nel mio caso avevo dimenticato di salvare le modifiche al file 'app / hero.ts', dopo aver salvato e riavviato il servizio è stato risolto.

La mia risoluzione,

Nel mio caso, ho creato un file modello e lo ho tenuto vuoto,

quindi quando l'ho importato su un altro modello, mi dà errore. quindi scrivi la definizione quando crei un file dattiloscritto del modello.

modificare

import{observable} from 'rxjs/observable'; 

per

import{observable} from 'rxjs';

assicurati di avere salvato il file .TS prima di compilare.

aggiungilo prima di esportare la classe

@Injectable({
  providedIn: 'root'
})