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 tutoriel angular2 à cette adresse: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html j'ai mis le hero interface dans un seul fichier sous le dossier app, dans la console j'ai l'erreur suivante:
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 de héros, l'erreur disparaît, ceci n'est pas mentionné dans la documentation, quoi de mal à mon importation ?
Ma directive d'importation (au début des fichiers de composant) à la fois dans app.components.ts et 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 placer le code dans un dossier du héros ?
Merci pour vos réponses.
Essayez de redémarrer l'éditeur dans lequel vous écrivez le code (code VS ou Sublime). Compiler et l'exécuter à nouveau. J'ai fait la même chose et ça a fonctionné.
Cela se produit lorsque vous ajoutez une nouvelle classe en dehors de votre éditeur ou continuez à exécuter votre angular Cli 'ng serve'. En fait, votre éditeur ou la commande 'ng serve' risquent de ne pas pouvoir trouver les fichiers nouvellement créés.
J'ai eu la même erreur dans le même tutoriel parce que j'avais oublié le mot clé exportation pour l'interface.
vous avez probablement oublié d'ajouter "Exporter" dans la définition de la classe.
->
export class Hero {
id: number;
name: string;
}
Aussi, essayez avec
export {Hero}
au bas de votre classe hero.ts, et enfin, vérifiez le nom du fichier en majuscule et le nom de la classe.
L'erreur est due au fait que vous n'avez pas enregistré les fichiers après les avoir créés.
Essayez d'enregistrer 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 en dessous du menu "Fichier" affiché en bleu.
Redémarrer mon processus ng serve a fonctionné pour moi
Pour les personnes obtenant 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 constaté chaque fois que j'ajoute un nouveau fichier à mon projet, je dois arrêter et redémarrer le serveur ng.
Cette erreur est due à l'échec du serveur ng serve pour récupérer automatiquement un fichier récemment ajouté. Pour résoudre ce problème, redémarrez simplement votre serveur.
Bien que fermer la réouverture de l'éditeur de texte ou IDE résolve ce problème, beaucoup de personnes ne veulent pas passer par 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 est en cours d'exécution,
- Appuyez sur
ctrl+Cpour arrêter le serveur, puis, - Redémarrez le serveur:
ng serve
Cela devrait fonctionner.
redémarrage du 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), ce qui a mis fin au service. Au redémarrage du serveur, l'erreur a disparu :). Parfois, des fautes de frappe et des gros doigts aident ;-)
Dans le tutoriel, vous devez placer 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 le modifier.
Edit: Le code peut toujours fonctionner mais le compilateur se plaindra parce que 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 voudrais simplement changer l'importation en import {Hero} from '../hero'.
Problème de l'éditeur. Lorsque vous créez des fichiers n'utilisant pas la Angular CLI, veillez à accéder à Fichier> Enregistrer tout (Code VS) pour que l'éditeur connaisse vos nouvelles modifications. Puis lancez à nouveau "ng serve --open". Cela a résolu le mien. J'espère que ça aide
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.
Je faisais face 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.
P.S: Je rencontrais un problème sur une machine Windows et le problème est survenu lorsque j'ai déplacé le module dans un nouveau dossier.
Vous devriez enregistrer tous les fichiers. Par exemple, html, css, composant.ts, module, fichiers de modèle. Ouvrez chaque fichier et appuyez sur ctrl-S. Cela a fonctionné pour moi
J'ai fait face au même problème.
J'ai redémarré mon serveur et cela fonctionne bien. On dirait un bug.
J'ai rencontré le même problème dans VSC. Avez-vous relancé l'éditeur et relancé l'application? Cela a bien fonctionné.
J'ai constaté que non seulement je devais redémarrer Visual Studio Code, mais aussi le processus du serveur de noeud avant de pouvoir obtenir une bonne compilation.
J'utilise angular 7. Je l'ai modifié comme ci-dessous dans mon fichier hero.ts.
from: export interface Hero
to: export class Hero
Remarque: le nom de ma classe était différent et il était utilisé comme objet de valeur ou dto.
Ma résolution,
Dans mon cas, j’ai créé un fichier modèle et l’ai laissé vierge,
alors quand je l'ai importé dans un autre modèle, cela me donne une erreur. alors écrivez la définition lorsque vous créez un fichier de type TypeScript.
Dans mon cas, j'avais oublié de sauvegarder les modifications apportées au fichier 'app/hero.ts', après avoir sauvegardé et redémarré le service, le problème était résolu.
J'ai eu un problème similaire. J'ai écrit héros au lieu de héros
importer ce qui suit:
import { Hero } from '../Hero';
Ouvrez l'invite de commande, accédez au dossier de l'application, par exemple. D:\angular-tour-of-heroes\src\app
Ensuite, créez un nouveau fichier en utilisant la commande suivante:
ng generate class hero
Cela créera un fichier hero.ts. Ensuite, vous pouvez coller le code d'exportation et l'erreur disparaîtra.