El archivo 'app / hero.ts' no es un error de módulo en la consola, ¿dónde almacenar archivos de interfaces en la estructura de directorios con angular2?

Estoy haciendo el angular2tutorial en esta dirección: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html He puesto la herointerfaz en un solo archivo debajo de la appcarpeta, en la consola tengo este error :

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 coloco mi archivo de interfaz en una carpeta de héroe, el error desaparece, esto no se menciona en la documentación, ¿qué hay de malo en mi importación ?

Mi directiva de importación (al comienzo de los archivos componentes) en ambos app.components.tsy hero-detail.component.ts:

import {Component} from 'angular2/core';

import {Hero} from './hero';

¿Debo reemplazar mi directiva de importación por: import {Hero} from './'; o simplemente poner el código en una carpeta de héroe ?

Intente reiniciar el editor en el que está escribiendo el código (código VS o Sublime). Compilar y ejecutar de nuevo. He hecho lo mismo y funcionó.

Esto sucede cuando agrega una nueva clase fuera de su editor o sigue ejecutando su cli 'ng serve' angular. De hecho, es posible que su editor o el comando 'ng serve' no puedan encontrar los archivos recién creados.

Obtuve el mismo error en el mismo tutorial porque había olvidado la palabra clave de exportación para la interfaz.

probablemente olvidó agregar "Exportar" en la definición de clase.

->

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

Además, intente con

export {Hero} 

en la parte inferior de su clase hero.ts, y finalmente, verifique el nombre del archivo de mayúscula y el nombre de la clase.

El error se debe a que no ha guardado los archivos después de crearlos.

Intente guardar todo el archivo haciendo clic en "Guardar todo" en el Editor.

Puede ver la cantidad de archivos que no se guardan mirando debajo del menú "Archivo" que se muestra en color azul.

Reiniciar mi ng serveproceso funcionó para mí

Para las personas que obtienen el mismo error en stackblitz

Encontrará una pestaña Dependencia en la barra lateral izquierda del IDE. Simplemente haga clic en el botón Actualizar al lado y estará listo para comenzar.

Como experimenté cada vez que agrego un nuevo archivo a mi proyecto, tuve que detener y reiniciar el servidor ng.

El tutorial hace que coloque todos los componentes y el archivo de interfaz en el mismo directorio, por lo tanto, la importación relativa './hero'si desea moverlo a otro lugar, debe cambiar esto.

Editar: el código aún puede funcionar, pero el compilador se quejará porque está intentando importar desde una ubicación incorrecta. Simplemente cambiaría la importación en función de su estructura. Por ejemplo:

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

Simplemente cambiaría la importación a import {Hero} from '../hero'.

Este error es causado por el error del servidor ng servepara recoger automáticamente un archivo recién agregado. Para solucionar esto, simplemente reinicie su servidor.

Aunque cerrar la reapertura del editor de texto o IDE resuelve este problema, muchas personas no quieren pasar por todo el estrés de reabrir el proyecto. Para arreglar esto sin cerrar el editor de texto ...

En la terminal donde se ejecuta el servidor,

• Presione ctrl+Cpara detener el servidor y luego,
• Inicie el servidor nuevamente: ng serve

Eso debería funcionar.

Me enfrenté al mismo problema.

Reinicié mi servidor y funciona bien. Parece un error.

reiniciar ng servir

Tuve el mismo problema. Para buscar el error, seleccioné el error y accidentalmente hice un CTRL + C (que significa copiar), que finalizó ng serve. Al reiniciar ng serve, el error desapareció :). A veces, los errores tipográficos y los dedos gordos ayudan ;-)

Problema del editor. Cuando cree archivos nuevos que no utilicen CLI angular, asegúrese de ir a Archivo> Guardar todo (Código VS) para informar al Editor de sus nuevos cambios. Luego ejecute "ng serve --open" nuevamente. Se resolvió el mío. Espero eso ayude

Me encontré con el mismo problema en VSC. Reinició el editor y comenzó la aplicación nuevamente. Funcionó bien.

Descubrí que no solo tenía que reiniciar Visual Studio Code sino también el proceso del servidor de nodo antes de poder obtener una buena compilación.

Estaba enfrentando el mismo problema, intenté reiniciar mi servidor, reabrí el editor, pero el reinicio de la computadora hizo la magia.

PD: Estaba enfrentando un problema en una máquina con Windows y ocurrió cuando moví el módulo a una nueva carpeta.

Tuve un problema similar Escribí héroe en lugar de héroe

importar lo siguiente:

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

A veces, este error ocurre cuando el archivo .ts no se guarda. Por lo tanto, asegúrese de guardar todos los archivos del proyecto; de lo contrario, intente reiniciar el editor.

Abra el símbolo del sistema, vaya a la carpeta de la aplicación, p. Ej. D:\angular-tour-of-heroes\src\app

Luego cree un nuevo archivo con el siguiente comando:

ng generate class hero

Esto creará un hero.tsarchivo. Luego puede pegar el código de exportación y el error desaparecerá.

Debes guardar todos los archivos. Por ejemplo html, css, component.ts, módulo, archivos de modelo. Abra cada archivo y presione ctrl-S. Esto funciono para mi

En mi caso, olvidé guardar los cambios en el archivo 'app / hero.ts', después de guardar y reiniciar ng serve se resolvió el problema.

Mi resolución

En mi caso, he creado un archivo modelo y lo he mantenido en blanco,

así que cuando lo importé a otro modelo, me da un error. escriba la definición cuando cree un archivo de mecanografiado modelo.

cambio

import{observable} from 'rxjs/observable'; 

a

import{observable} from 'rxjs';

asegúrese de guardar el archivo .TS antes de compilar.

agregue esto antes de exportar la clase

@Injectable({
  providedIn: 'root'
})