O arquivo 'app / hero.ts' não é um erro de módulo no console, onde armazenar arquivos de interface na estrutura de diretórios com angular2?

Estou fazendo o angular2tutorial neste endereço: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html Coloquei a herointerface em um único arquivo na apppasta, no console, tenho este erro :

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.

Se eu colocar meu arquivo de interface em uma pasta hero, o erro desaparece, isso não é mencionado na documentação, o que há de errado na minha importação ?

Minha diretiva de importação (no começo dos arquivos do componente) em ambos app.components.tse hero-detail.component.ts:

import {Component} from 'angular2/core';

import {Hero} from './hero';

Devo substituir minha diretiva de importação por: import {Hero} from './'; ou simplesmente colocar o código em uma pasta hero ?

Tente Reiniciar o editor no qual você está escrevendo o código (código VS ou Sublime). Compile e execute-o novamente. Eu fiz o mesmo e funcionou.

Isso acontece quando você adiciona uma nova classe fora do seu editor ou continua executando seu serviço de cliques angulares. Na verdade, seu editor ou o comando 'ng serve' pode não conseguir encontrar os arquivos recém-criados.

Eu recebi o mesmo erro no mesmo tutorial porque havia esquecido a palavra-chave de exportação da interface.

provavelmente você esqueceu de adicionar "Exportar" na definição da classe.

->

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

Além disso, tente com

export {Hero} 

na parte inferior da classe hero.ts e, finalmente, verifique o nome do arquivo da letra maiúscula e o nome da classe.

O erro ocorre porque você não salvou os arquivos após criá-los.

Tente salvar todo o arquivo clicando em "Salvar tudo" no Editor.

Você pode ver o número de arquivos que não foram salvos olhando abaixo do menu "Arquivo" mostrado usando a cor azul.

Reiniciar meu ng serveprocesso funcionou para mim

Para pessoas recebendo o mesmo erro no stackblitz

Você encontrará uma guia Dependência na barra lateral esquerda do IDE. Basta clicar no botão de atualização ao lado e você estará pronto.

Como experimentei sempre que adicionei um novo arquivo ao meu projeto, pude parar e reiniciar o servidor ng.

O tutorial coloca todos os componentes e o arquivo de interface no mesmo diretório, portanto, a importação relativa, './hero'se você deseja movê-lo para outro lugar, é necessário alterar isso.

Editar: O código ainda pode funcionar, mas o compilador irá reclamar porque você está tentando importar de um local incorreto. Eu simplesmente mudaria a importação com base em sua estrutura. Por exemplo:

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

Eu simplesmente mudaria a importação para import {Hero} from '../hero'.

Esse erro é causado pelo falha do ng serveserviço em coletar automaticamente um arquivo recém-adicionado. Para corrigir isso, basta reiniciar o servidor.

Embora o fechamento da reabertura do editor de texto ou do IDE resolva esse problema, muitas pessoas não querem passar por todo o estresse de reabrir o projeto. Para corrigir isso sem fechar o editor de texto ...

No terminal em que o servidor está sendo executado,

• Pressione ctrl+Cpara parar o servidor e, em seguida,
• Inicie o servidor novamente: ng serve

Isso deve funcionar.

Eu enfrentei o mesmo problema.

Eu reiniciei meu servidor e funciona bem. Parece um bug.

reiniciar ng servir

Eu tive o mesmo problema. Para procurar o erro, selecionei o erro e acidentalmente fiz um CTRL + C (que significa copiar), que encerrou o serviço. Ao reiniciar o ng serve, o erro desapareceu :). Às vezes, erros de digitação e dedos gordos ajudam ;-)

Edição do editor. Ao criar novos arquivos que não usam a CLI angular, vá para Arquivo> Salvar tudo (código VS) para deixar o Editor ciente de suas novas alterações. Em seguida, execute "ng serve --open" novamente. Resolveu o meu. Espero que ajude

Encontrei o mesmo problema no VSC. Reiniciou o editor e iniciou o aplicativo novamente. Funcionou bem.

Eu descobri que não apenas precisava reiniciar o Visual Studio Code, mas também o processo do servidor do nó antes que eu pudesse obter uma boa compilação.

Eu estava enfrentando o mesmo problema, tentei reiniciar o servidor, reabrir o editor, mas a reinicialização do computador fez a mágica.

PS: Eu estava enfrentando problemas em uma máquina Windows e ocorreu um problema quando mudei o módulo para uma nova pasta.

Eu tive uma questão semelhante. Eu escrevi herói em vez de herói

importe o seguinte:

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

Às vezes, esse erro ocorre quando o arquivo .ts não é salvo. Portanto, verifique se todos os arquivos do projeto foram salvos, caso contrário, tente reiniciar o editor.

Abra o prompt de comando, vá para a pasta do aplicativo, por exemplo D:\angular-tour-of-heroes\src\app

Em seguida, crie um novo arquivo usando o seguinte comando:

ng generate class hero

Isso criará um hero.tsarquivo. Em seguida, você pode colar o código de exportação e o erro desapareceu.

Você deve salvar todos os arquivos. Por exemplo, html, css, component.ts, módulo, arquivos de modelo. Abra cada arquivo e pressione ctrl-S. Isso funcionou para mim

No meu caso, esqueci-me de salvar as alterações no arquivo 'app / hero.ts', depois de salvar e reiniciar o ng serve, o problema foi resolvido.

Minha resolução,

No meu caso, criei um arquivo de modelo e o mantive em branco,

então quando eu o importei para outro modelo, isso me deu um erro. portanto, escreva a definição ao criar um arquivo de modelo datilografado.

mudança

import{observable} from 'rxjs/observable'; 

para

import{observable} from 'rxjs';

certifique-se de salvar o arquivo .TS antes de compilar.

adicione isso antes de exportar a classe

@Injectable({
  providedIn: 'root'
})