Die Datei 'app / hero.ts' ist kein Modulfehler in der Konsole. Wo werden Schnittstellendateien in der Verzeichnisstruktur mit angle2 gespeichert?

Ich mache das angular2Tutorial unter folgender Adresse: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html Ich habe die heroSchnittstelle in einer einzelnen Datei unter dem appOrdner abgelegt . In der Konsole ist dieser Fehler aufgetreten ::

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.

Wenn ich meine Schnittstellendatei in einen Heldenordner lege, verschwindet der Fehler. Dies wird in der Dokumentation nicht erwähnt. Was ist mit meinem Import falsch ?

Meine Importanweisung (am Anfang der Komponentendateien) in beiden app.components.tsund hero-detail.component.ts:

import {Component} from 'angular2/core';

import {Hero} from './hero';

Muss ich meine Importanweisung ersetzen durch: import {Hero} from './'; oder einfach den Code in einen Heldenordner legen ?

Versuchen Sie, den Editor neu zu starten, in dem Sie den Code schreiben (VS-Code oder Sublime). Kompilieren und erneut ausführen. Ich habe das gleiche getan und es hat funktioniert.

Dies geschieht, wenn Sie eine neue Klasse außerhalb Ihres Editors hinzufügen oder Ihren eckigen Cli 'ng Serve' weiter ausführen. Tatsächlich kann Ihr Editor oder der Befehl 'ng serve' die neu erstellten Dateien möglicherweise nicht finden.

Ich habe den gleichen Fehler im gleichen Tutorial erhalten, weil ich das Schlüsselwort export für die Benutzeroberfläche vergessen hatte .

Wahrscheinlich haben Sie vergessen, "Export" in die Klassendefinition aufzunehmen.

->

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

Versuchen Sie es auch mit

export {Hero} 

Überprüfen Sie am Ende Ihrer hero.ts-Klasse den Namen der Großbuchstaben und den Klassennamen.

Der Fehler liegt darin, dass Sie die Dateien nach dem Erstellen nicht gespeichert haben.

Versuchen Sie, die gesamte Datei zu speichern, indem Sie im Editor auf "Alle speichern" klicken.

Sie können die Anzahl der Dateien sehen, die nicht gespeichert wurden, indem Sie unter dem Menü "Datei" mit der blauen Farbe nachsehen.

Das Neustarten meines ng serveProzesses hat bei mir funktioniert

Für Leute, die den gleichen Fehler auf stackblitz bekommen

In der linken Seitenleiste der IDE finden Sie eine Registerkarte " Abhängigkeit" . Klicken Sie einfach auf die Schaltfläche "Aktualisieren" daneben und Sie können loslegen.

Wie ich immer erfahren habe, wenn ich meinem Projekt eine neue Datei hinzufüge, muss ich den ng-Server stoppen und neu starten.

Im Tutorial werden alle Komponenten und die Schnittstellendatei in dasselbe Verzeichnis gestellt, daher der relative Import, './hero'wenn Sie sie an einen anderen Ort verschieben möchten, müssen Sie dies ändern.

Bearbeiten: Der Code funktioniert möglicherweise noch, aber der Compiler beschwert sich, weil Sie versuchen, von einem falschen Speicherort zu importieren. Ich würde den Import einfach basierend auf Ihrer Struktur ändern. Beispielsweise:

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

Ich würde einfach den Import auf ändern import {Hero} from '../hero'.

Dieser Fehler wird dadurch verursacht, dass der Fehler des Servers ng serveeine neu hinzugefügte Datei automatisch aufnimmt . Um dies zu beheben, starten Sie einfach Ihren Server neu.

Obwohl das Schließen des erneuten Öffnens des Texteditors oder der IDE dieses Problem löst, möchten viele Menschen nicht den ganzen Stress des erneuten Öffnens des Projekts durchstehen. Um dies zu beheben, ohne den Texteditor zu schließen ...

In dem Terminal, in dem der Server ausgeführt wird,

• Drücken Sie ctrl+C, um den Server zu stoppen.
• Starten Sie den Server erneut: ng serve

Das sollte funktionieren.

Ich stand vor dem gleichen Problem.

Ich habe meinen Server neu gestartet und es funktioniert gut. Scheint wie ein Fehler.

Neustart ng servieren

Ich hatte das gleiche Problem. Um nach dem Fehler zu suchen, habe ich den Fehler ausgewählt und versehentlich STRG + C (Kopieren) ausgeführt, wodurch ng serve beendet wurde. Beim Neustart von ng serve verschwand der Fehler :). Manchmal helfen Tippfehler und dicke Finger ;-)

Editor Problem. Wenn Sie neue Dateien erstellen, die Angular CLI nicht verwenden, gehen Sie zu Datei> Alle speichern (VS-Code), um den Editor über Ihre neuen Änderungen zu informieren. Führen Sie dann erneut "ng serve --open" aus. Es hat meins gelöst. Ich hoffe es hilft

Ich bin in VSC auf dasselbe Problem gestoßen. Hat den Editor neu gestartet und die Anwendung erneut gestartet. Es hat gut funktioniert.

Ich stellte fest, dass ich nicht nur Visual Studio Code neu starten musste, sondern auch den Knotenserverprozess, bevor ich eine gute Kompilierung erhalten konnte.

Ich hatte das gleiche Problem, habe versucht, meinen Server neu zu starten und den Editor erneut zu öffnen, aber der Neustart des Computers hat die Magie ausgelöst.

PS: Auf einem Windows-Computer trat ein Problem auf, das beim Verschieben des Moduls in einen neuen Ordner auftrat.

Ich hatte ein ähnliches Problem. Ich habe Held statt Held geschrieben

Importieren Sie Folgendes:

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

Manchmal tritt dieser Fehler auf, wenn die .ts-Datei nicht gespeichert wird. Stellen Sie also sicher, dass alle Dateien im Projekt gespeichert sind. Andernfalls versuchen Sie, den Editor neu zu starten.

Öffnen Sie die Eingabeaufforderung und wechseln Sie in den App-Ordner, z D:\angular-tour-of-heroes\src\app

Erstellen Sie dann eine neue Datei mit dem folgenden Befehl:

ng generate class hero

Dadurch wird ein erstellt hero.ts Datei erstellt. Dann können Sie den Exportcode einfügen, und der Fehler ist verschwunden.

Sie sollten alle Dateien speichern. Zum Beispiel HTML-, CSS-, Komponenten.ts-, Modul- und Modelldateien. Öffnen Sie jede Datei und drücken Sie Strg-S. Das hat bei mir funktioniert

In meinem Fall hatte ich vergessen, Änderungen an der Datei 'app / hero.ts' zu speichern. Nach dem Speichern und Neustarten des Dienstes wurde das Problem behoben.

Mein Vorsatz,

In meinem Fall habe ich eine Modelldatei erstellt und leer gelassen.

Wenn ich es in ein anderes Modell importiere, gibt es mir einen Fehler. Schreiben Sie daher die Definition, wenn Sie eine Modell-Typoskriptdatei erstellen.

Veränderung

import{observable} from 'rxjs/observable'; 

zu

import{observable} from 'rxjs';

Stellen Sie vor dem Kompilieren sicher, dass Sie die .TS-Datei gespeichert haben.

Fügen Sie dies hinzu, bevor Sie die Klasse exportieren

@Injectable({
  providedIn: 'root'
})