Le fichier 'app / hero.ts' n'est pas une erreur de module dans la console, où stocker les fichiers d'interface dans la structure de répertoires avec angular2?

Je fais le angular2tutoriel à cette adresse: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html J'ai mis l' herointerface dans un seul fichier sous le appdossier, dans la console j'ai cette erreur :

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.

Si je mets mon fichier d'interface dans un dossier héros, l'erreur disparaît, cela n'est pas mentionné dans la documentation, quel est le problème avec mon import ?

Ma directive d'importation (au début des fichiers de composants) dans les deux app.components.tset hero-detail.component.ts:

import {Component} from 'angular2/core';

import {Hero} from './hero';

Dois-je remplacer ma directive d'importation par: import {Hero} from './'; ou simplement mettre le code dans un dossier héros ?

Essayez de redémarrer l'éditeur dans lequel vous écrivez le code (code VS ou Sublime). Compilez et exécutez à nouveau. J'ai fait la même chose et cela a fonctionné.

Cela se produit lorsque vous ajoutez une nouvelle classe en dehors de votre éditeur ou que vous continuez à exécuter votre service de cli 'ng angulaire'. En fait, votre éditeur ou la commande «ng serve» peut ne pas trouver les fichiers nouvellement créés.

J'ai eu la même erreur dans le même tutoriel car j'avais oublié le mot-clé d' exportation pour l'interface.

vous avez probablement oublié d'ajouter "Exporter" dans la définition de classe.

->

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

Essayez également avec

export {Hero} 

en bas de votre classe hero.ts, et enfin, vérifiez le nom du fichier en majuscules et le nom de la classe.

L'erreur est que vous n'avez pas enregistré les fichiers après les avoir créés.

Essayez de sauvegarder tout le fichier en cliquant sur "Enregistrer tout" dans l'éditeur.

Vous pouvez voir le nombre de fichiers qui ne sont pas enregistrés en regardant ci-dessous le menu "Fichier" affiché en bleu.

Redémarrer mon ng serveprocessus a fonctionné pour moi

Pour les personnes ayant la même erreur sur stackblitz

Vous trouverez un onglet Dépendance dans la barre latérale gauche de l'EDI. Cliquez simplement sur le bouton d'actualisation à côté et vous serez prêt à partir.

Comme je l'ai expérimenté chaque fois que j'ajoute un nouveau fichier à mon projet, je dois arrêter et redémarrer le serveur ng.

Le tutoriel vous permet de mettre tous les composants et le fichier d'interface dans le même répertoire d'où l'importation relative './hero' si vous souhaitez le déplacer ailleurs, vous devez changer cela.

Edit: le code peut toujours fonctionner mais le compilateur se plaindra car vous tentez une importation à partir d'un emplacement incorrect. Je changerais simplement l'importation en fonction de votre structure. Par exemple:

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

Je changerais simplement l'importation en import {Hero} from '../hero'.

Cette erreur est causée par l'échec du ng serve pour récupérer automatiquement un fichier nouvellement ajouté. Pour résoudre ce problème, redémarrez simplement votre serveur.

Bien que la fermeture de la réouverture de l'éditeur de texte ou de l'EDI résout ce problème, beaucoup de gens ne veulent pas subir tout le stress de la réouverture du projet. Pour résoudre ce problème sans fermer l'éditeur de texte ...

Dans le terminal où le serveur fonctionne,

• Appuyez sur ctrl+Cpour arrêter le serveur puis,
• Redémarrez le serveur: ng serve

Cela devrait fonctionner.

J'ai fait face au même problème.

J'ai redémarré mon serveur et cela fonctionne très bien. Cela ressemble à un bug.

redémarrer le service

J'ai eu le même problème. Afin de rechercher l'erreur, j'ai sélectionné l'erreur et ai accidentellement fait un CTRL + C (ce qui signifie copier), qui a mis fin au service ng. Au redémarrage de ng serve, l'erreur a disparu :). Parfois, les fautes de frappe et les gros doigts aident ;-)

Problème de l'éditeur. Lorsque vous créez de nouveaux fichiers qui n'utilisent pas Angular CLI, assurez-vous d'aller dans Fichier> Tout enregistrer (code VS) pour informer l'éditeur de vos nouvelles modifications. Puis exécutez à nouveau "ng serve --open". Cela a résolu le mien. J'espère que ça aide

J'ai rencontré le même problème dans VSC. A redémarré l'éditeur et redémarré l'application. Cela a bien fonctionné.

J'ai constaté que non seulement je devais redémarrer Visual Studio Code, mais également le processus du serveur de nœuds avant de pouvoir obtenir une bonne compilation.

J'étais confronté au même problème, j'ai essayé de redémarrer mon serveur, de rouvrir l'éditeur mais le redémarrage de l'ordinateur a fait la magie.

PS: J'étais confronté à un problème sur une machine Windows et un problème est survenu lorsque j'ai déplacé le module dans un nouveau dossier.

J'ai eu un problème similaire. J'ai écrit héros au lieu de héros

importer les éléments suivants:

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

Parfois, cette erreur se produit lorsque le fichier .ts n'est pas enregistré. Assurez-vous donc que tous les fichiers du projet sont enregistrés, sinon essayez de redémarrer l'éditeur.

Ouvrez l'invite de commande, accédez au dossier de l'application, par exemple D:\angular-tour-of-heroes\src\app

Créez ensuite un nouveau fichier à l'aide de la commande suivante:

ng generate class hero

Cela créera un hero.tsfichier. Ensuite, vous pouvez coller le code d'exportation et l'erreur a disparu.

Vous devez enregistrer tous les fichiers. Par exemple html, css, component.ts, module, fichiers de modèle. Ouvrez chaque fichier et appuyez sur ctrl-S. Cela a fonctionné pour moi

Dans mon cas, j'avais oublié d'enregistrer les modifications dans le fichier 'app / hero.ts', après l'enregistrement et le redémarrage de ng serve, le problème a été résolu.

Ma résolution,

Dans mon cas, j'ai créé un fichier modèle et je l'ai laissé vide,

donc quand je l'ai importé dans un autre modèle, cela me donne une erreur. écrivez donc la définition lorsque vous créez un fichier dactylographié de modèle.

changement

import{observable} from 'rxjs/observable'; 

à

import{observable} from 'rxjs';

assurez-vous d'avoir enregistré le fichier .TS avant la compilation.

ajoutez ceci avant d'exporter la classe

@Injectable({
  providedIn: 'root'
})