ファイル「app / hero.ts」は、コンソールのモジュールエラーではありません。angular2のディレクトリ構造にインターフェイスファイルを格納する場所はどこですか。

私はangular2このアドレスでチュートリアルを行っています：https : //angular.io/docs/ts/latest/tutorial/toh-pt3.htmlheroインターフェースをappフォルダーの下の単一のファイルに入れました。コンソールで、このエラーが発生しました：

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.

インターフェイスファイルをヒーローフォルダーに配置すると、エラーが消えます。これはドキュメントに記載されていません。インポートの何が問題になっていますか？

（コンポーネントファイルのbeguiningで）私のimportディレクティブの両方でapp.components.tsとhero-detail.component.ts：

import {Component} from 'angular2/core';

import {Hero} from './hero';

インポートディレクティブを次のように置き換える必要import {Hero} from './'; があります：または単にコードをヒーローフォルダーに配置しますか？

コード（VSコードまたはSublime）を記述しているエディターを再起動してみてください。コンパイルして再度実行します。私は同じことをしました、そしてそれはうまくいきました。

これは、エディターの外部に新しいクラスを追加するか、角度を付けたcli 'ng serve'を実行し続けると発生します。実際には、エディタまたは「ng serve」コマンドは、新しく作成されたファイルを見つけることができない場合があります。

インターフェイスのエクスポートキーワードを忘れていたため、同じチュートリアルで同じエラーが発生しました。

おそらく、クラス定義に「エクスポート」を追加するのを忘れていました。

->

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

また、試してみてください

export {Hero} 

hero.tsクラスの最後で、最後に大文字のファイル名とクラス名を確認します。

エラーは、作成後にファイルを保存していないためです。

エディターで「すべて保存」をクリックして、すべてのファイルを保存してみてください。

保存されていないファイルの数は、青色で表示されている「ファイル」メニューから確認できます。

ng serveプロセスを再開するとうまくいきました

Stackblitzで同じエラーが発生する人向け

あなたは見つけるでしょう依存 IDEの左側のサイドバーにあるタブを。横にある更新ボタンをクリックするだけで問題ありません。

プロジェクトに新しいファイルを追加するたびに経験したように、ngサーバーを停止して再起動する必要がありました。

チュートリアルでは、すべてのコンポーネントとインターフェースファイルを同じディレクトリに配置しているため、'./hero'これを変更する必要がある別の場所に移動したい場合は、相対的なインポートを行います。

編集：コードは引き続き機能する可能性がありますが、不適切な場所からインポートしようとしているため、コンパイラーは文句を言います。構造に基づいてインポートを変更するだけです。例えば：

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

単にインポートをに変更しimport {Hero} from '../hero'ます。

このエラーは、 ng serve、新しく追加されたファイルを自動的にピックアップするサーブがためにます。これを修正するには、サーバーを再起動するだけです。

テキストエディターまたはIDEを再び開くことでこの問題は解決しますが、多くの人はプロジェクトを再び開くことによるストレスのすべてを経験したくありません。テキストエディターを閉じずにこれを修正するには...

サーバーが実行されているターミナルで、

• を押しctrl+Cてサーバーを停止し、
• サーバーを再起動します。 ng serve

うまくいくはずです。

私は同じ問題に直面しました。

サーバーを再起動したところ、問題なく動作しました。バグのようです。

サーブを再開

同じ問題がありました。エラーを検索するために、エラーを選択し、誤ってCTRL + C（コピーを意味する）を実行したため、ngサーブが終了しました。ng serveを再起動すると、エラーが消えました:)。時にはタイプミスと太い指が役立つ;-)

エディターの問題。Angular CLIを使用しない新しいファイルを作成する場合は、[ファイル]> [すべて保存（VSコード）]に移動して、エディターに新しい変更を認識させます。次に、「ng serve --open」を再度実行します。それは私のものを解決しました。それが役に立てば幸い

VSCで同じ問題が発生しました。エディターを再起動して、アプリケーションを再度起動しました。それはうまくいきました。

Visual Studio Codeを再起動する必要があるだけでなく、適切なコンパイルを行う前にノードサーバープロセスも再起動する必要があることがわかりました。

私は同じ問題に直面していて、サーバーを再起動してエディターを再度開いてみましたが、コンピューターの再起動が魔法をかけました。

PS：Windowsマシンで問題が発生していましたが、モジュールを新しいフォルダーに移動したときに問題が発生しました。

同様の問題がありました。代わりにヒーローを書いたヒーロー

以下をインポートします。

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

このエラーは、.tsファイルが保存されていない場合に発生することがあります。したがって、プロジェクト内のすべてのファイルが保存されていることを確認してください。そうでない場合は、エディターを再起動してみてください。

コマンドプロンプトを開き、アプリフォルダーに移動します。 D:\angular-tour-of-heroes\src\app

次に、次のコマンドを使用して新しいファイルを作成します。

ng generate class hero

これによりhero.tsファイルが作成されます。次に、エクスポートコードを貼り付けることができ、エラーはなくなりました。

すべてのファイルを保存する必要があります。たとえば、html、css、component.ts、モジュール、モデルファイル。各ファイルを開き、Ctrl-Sを押します。これは私のために働いた

私の場合、ファイル「app / hero.ts」への変更を保存するのを忘れていました。ngserveを保存して再起動した後、問題は解決しました。

私の決議、

私の場合、モデルファイルを作成し、空白のままにしました。

他のモデルにインポートするとエラーになります。したがって、モデルのtypescriptファイルを作成するときに定義を記述します。

変化する

import{observable} from 'rxjs/observable'; 

に

import{observable} from 'rxjs';

コンパイルする前に、.TSファイルを保存していることを確認してください。

クラスをエクスポートする前にこれを追加します

@Injectable({
  providedIn: 'root'
})