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?


144

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 ?

Respostas:


422

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.


4
Reiniciar funciona ... mas alguém sabe Qual é a causa raiz?
Gaddigesh

Eu também tive esse problema com o Angular 4 e o VS Code. Eu estava acompanhando um dos vídeos da Code School, onde eles separavam os dados em um arquivo mocks.ts e, toda vez que compilavam, dizia que não era um módulo. Reiniciar o VS Code funcionou. É muito estranho que isso tenha acontecido, mas não recebi nenhum erro ao mover outras partes para arquivos separados.
Eric Garrison

2
É triste dizer, mas reiniciar funciona. E isso torna minha vida miserável: quando algo não funciona, não vou saber se é porque cometi um erro ou por causa de alguma peculiaridade inexplicável do Node / Angular / Visual Code que só permitirá que funcione se eu reiniciar o Visual Code ou o servidor. Não é assim que os profissionais trabalham! :-(
Alexis Dufrenoy

2
Corrigi-o salvando meu arquivo. #sad
Malcolm Anderson

1
Tentei reiniciar o servidor e o editor, não ajudou. Então tentei renomear classes e arquivos, eventualmente funcionou. Estranho, mas verdadeiro.
executável

37

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


32

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.


1
Não esqueci de exportar. Eu pensei que talvez tivesse um erro de digitação, então copiei e colei seu código. Isso resolveu o problema. Mas então voltei ao meu código anterior e funcionou também. Algo está errado.
Mariusz.W

é assim melhor do que criar um normal const?
187 Dani Dani

29

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.



6

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.


insira a descrição da imagem aqui


3

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


2

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'.


Meu código está funcionando perfeitamente, seja o que for que eu escreva import {Hero} from './';ou import {Hero} from './hero';. Gostaria de saber qual é a melhor maneira de armazenar arquivos de interface?
Sunitrams

Desculpe @Zyzle, downvoted como eu não acho que esta aborda a questão do OP teve
Steve Dunn

2

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.


1

Eu enfrentei o mesmo problema.

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


1

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 ;-)


1

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


0

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


Esta não é uma resposta que daria qualquer insight. Mesmo se você acha que reiniciar é a resposta para esse problema, você deve dizer por que isso acontece.
M-- 18/04/19

0

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.


0

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.


0

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

importe o seguinte:

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

0

À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.


0

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.


0

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


0

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.


0

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.


0

mudança

import{observable} from 'rxjs/observable'; 

para

import{observable} from 'rxjs';

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


0

adicione isso antes de exportar a classe

@Injectable({
  providedIn: 'root'
})  
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.