Plik „app / hero.ts” nie jest błędem modułu w konsoli, gdzie przechowywać pliki interfejsów w strukturze katalogów z angular2?

angular2Samouczek robię pod tym adresem: https://angular.io/docs/ts/latest/tutorial/toh-pt3.htmlhero Interfejs umieściłem w jednym pliku pod appfolderem, w konsoli mam ten błąd :

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.

Jeśli umieszczę plik interfejsu w folderze hero, błąd zniknie, nie ma tego w dokumentacji, co jest nie tak z moim importem ?

Moja dyrektywa importowa (na początku plików składowych) w obu app.components.tsi hero-detail.component.ts:

import {Component} from 'angular2/core';

import {Hero} from './hero';

Czy muszę zamienić dyrektywę importu na: import {Hero} from './'; czy po prostu umieścić kod w folderze hero ?

Spróbuj ponownie uruchomić edytor, w którym piszesz kod (kod VS lub Sublime). Skompiluj i uruchom ponownie. Zrobiłem to samo i zadziałało.

Dzieje się tak, gdy dodajesz nową klasę poza edytorem lub kontynuujesz obsługę kątowego kliknięcia. W rzeczywistości Twój edytor lub polecenie „ng serv” mogą nie być w stanie znaleźć nowo utworzonych plików.

Otrzymałem ten sam błąd w tym samym samouczku, ponieważ zapomniałem słowa kluczowego eksportu dla interfejsu.

prawdopodobnie zapomniałeś dodać „Eksport” w definicji klasy.

->

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

Spróbuj też z

export {Hero} 

na dole swojej klasy hero.ts, a na koniec sprawdź nazwę pliku i nazwę klasy z wielkiej litery.

Błąd jest spowodowany tym, że nie zapisałeś plików po ich utworzeniu.

Spróbuj zapisać cały plik, klikając „Zapisz wszystko” w edytorze.

Możesz zobaczyć liczbę plików, które nie zostały zapisane, patrząc pod menu „Plik” pokazane kolorem niebieskim.

Ponowne uruchomienie ng serveprocesu zadziałało dla mnie

Dla ludzi otrzymujących ten sam błąd na stackblitz

Znajdziesz zakładkę Zależności na lewym pasku bocznym IDE. Wystarczy kliknąć przycisk odświeżania obok niego i gotowe.

Jak zauważyłem za każdym razem, gdy dodałem nowy plik do mojego projektu, musiałem zatrzymać i ponownie uruchomić serwer ng.

W samouczku umieścisz wszystkie komponenty i plik interfejsu w tym samym katalogu, stąd import względny, './hero'jeśli chcesz przenieść go w inne miejsce, musisz to zmienić.

Edycja: kod może nadal działać, ale kompilator będzie narzekał, ponieważ próbujesz zaimportować z nieprawidłowej lokalizacji. Po prostu zmieniłbym import w oparciu o twoją strukturę. Na przykład:

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

Po prostu zmieniłbym import na import {Hero} from '../hero'.

Ten błąd jest spowodowany niepowodzeniem ng serveserwowania, aby automatycznie pobrać nowo dodany plik. Aby to naprawić, po prostu zrestartuj serwer.

Chociaż zamknięcie ponownego otwarcia edytora tekstu lub IDE rozwiązuje ten problem, wiele osób nie chce przechodzić przez cały stres związany z ponownym otwarciem projektu. Aby naprawić ten problem bez zamykania edytora tekstu ...

W terminalu, na którym działa serwer,

• Naciśnij, ctrl+Caby zatrzymać serwer, a następnie
• Uruchom serwer ponownie: ng serve

To powinno działać.

Napotkałem ten sam problem.

Zrestartowałem serwer i działa dobrze. Wygląda na błąd.

zrestartuj serw

Miałem ten sam problem. Aby wyszukać błąd, wybrałem błąd i przypadkowo wykonałem CTRL + C (czyli kopiowanie), co zakończyło serwis ng. Po ponownym uruchomieniu ng serwisu błąd zniknął :). Czasami pomagają literówki i grube palce ;-)

Problem z redakcją. Podczas tworzenia nowych plików, które nie używają interfejsu wiersza polecenia Angular, upewnij się, że przechodzisz do Plik> Zapisz wszystko (VS Code), aby umożliwić redaktorowi powiadomienie o nowych zmianach. Następnie ponownie uruchom „ng serv --open”. To rozwiązało moje. Mam nadzieję, że to pomoże

Napotkałem ten sam problem w VSC. Zrestartowałem edytor i ponownie uruchomiłem aplikację. Działało dobrze.

Zauważyłem, że nie tylko musiałem ponownie uruchomić Visual Studio Code, ale także proces serwera węzłowego, zanim mogłem uzyskać dobrą kompilację.

Miałem ten sam problem, próbowałem ponownie uruchomić serwer, ponownie otworzyć edytor, ale ponowne uruchomienie komputera zrobiło magię.

PS: Napotkałem problem na komputerze z systemem Windows i wystąpił problem, gdy przeniosłem moduł do nowego folderu.

Miałem podobny problem. Napisałem bohatera zamiast bohatera

zaimportuj następujące elementy:

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

Czasami ten błąd występuje, gdy plik .ts nie jest zapisywany. Upewnij się więc, że wszystkie pliki w projekcie zostały zapisane, w przeciwnym razie spróbuj ponownie uruchomić edytor.

Otwórz wiersz poleceń, przejdź do folderu aplikacji, np D:\angular-tour-of-heroes\src\app

Następnie utwórz nowy plik za pomocą następującego polecenia:

ng generate class hero

Spowoduje to utworzenie hero.tspliku. Następnie możesz wkleić kod eksportu, a błąd zniknął.

Powinieneś zapisać wszystkie pliki. Na przykład html, css, component.ts, module, pliki modeli. Otwórz każdy plik i naciśnij ctrl-S. To zadziałało dla mnie

W moim przypadku zapomniałem zapisać zmiany w pliku „app / hero.ts”, po zapisaniu i ponownym uruchomieniu serwisu problem został rozwiązany.

Moja rozdzielczość,

W moim przypadku utworzyłem plik modelu i pozostawiłem go pustym,

więc kiedy zaimportowałem go do innego modelu, daje mi błąd. więc zapisz definicję podczas tworzenia pliku z typem modelu.

zmiana

import{observable} from 'rxjs/observable'; 

do

import{observable} from 'rxjs';

upewnij się, że masz zapisany plik .TS przed kompilacją.

dodaj to przed wyeksportowaniem klasy

@Injectable({
  providedIn: 'root'
})