ไฟล์ 'app / hero.ts' ไม่ใช่ข้อผิดพลาดของโมดูลในคอนโซลที่จัดเก็บไฟล์อินเตอร์เฟสในโครงสร้างไดเรกทอรีด้วย angular2

ฉันกำลังทำangular2กวดวิชาตามที่อยู่นี้: https://angular.io/docs/ts/latest/tutorial/toh-pt3.htmlฉันใส่heroอินเตอร์เฟซในไฟล์เดียวภายใต้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.

ถ้าฉันใส่แฟ้มอินเตอร์เฟซของฉันในโฟลเดอร์พระเอกข้อผิดพลาดหายไป, นี้ไม่ได้กล่าวถึงในเอกสารนี้มีอะไรผิดปกติกับการนำเข้าของฉัน ?

คำสั่งการนำเข้าของฉัน (ณ จุดเริ่มต้นของไฟล์ส่วนประกอบ) ทั้งในapp.components.tsและhero-detail.component.ts:

import {Component} from 'angular2/core';

import {Hero} from './hero';

ฉันต้องแทนที่คำสั่งการนำเข้าของฉันด้วย: import {Hero} from './'; หรือใส่รหัสในโฟลเดอร์ฮีโร่ ?

ลองรีสตาร์ทตัวแก้ไขที่คุณกำลังเขียนรหัส (รหัส VS หรือ Sublime) รวบรวมและเรียกใช้อีกครั้ง ฉันทำแบบเดียวกันและใช้งานได้

สิ่งนี้จะเกิดขึ้นเมื่อคุณเพิ่มคลาสใหม่นอกตัวแก้ไขหรือเรียกใช้ cli 'ng เสิร์ฟ' เชิงมุมของคุณ ที่จริงแล้วตัวแก้ไขหรือคำสั่ง 'ng เสิร์ฟ' ของคุณอาจไม่สามารถค้นหาไฟล์ที่สร้างขึ้นใหม่ได้

ฉันได้รับข้อผิดพลาดเดียวกันในบทช่วยสอนเดียวกันเพราะฉันลืมคำหลักส่งออกสำหรับอินเทอร์เฟซ

คุณอาจลืมเพิ่ม "ส่งออก" ในคำจำกัดความของชั้นเรียน

->

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

ว่าควรจะทำงาน

ฉันประสบปัญหาเดียวกัน

ฉันรีสตาร์ทเซิร์ฟเวอร์และใช้งานได้ดี ดูเหมือนว่าแมลง

เริ่มบริการ ng

ฉันมีปัญหาเดียวกัน เพื่อค้นหาข้อผิดพลาดฉันเลือกข้อผิดพลาดและไม่ได้ตั้งใจทำ CTRL + C (หมายถึงการคัดลอก) ซึ่งยุติการให้บริการ ng เมื่อรีสตาร์ท ng เสิร์ฟข้อผิดพลาดหายไป :) บางครั้งการพิมพ์ผิดและนิ้วอ้วนช่วย ;-)

ปัญหาบรรณาธิการ เมื่อคุณสร้างไฟล์ใหม่ที่ไม่ได้ใช้ Angular CLI ตรวจสอบให้แน่ใจว่าคุณไปที่ไฟล์> บันทึกทั้งหมด (รหัส VS) เพื่อแจ้งให้บรรณาธิการทราบถึงการเปลี่ยนแปลงใหม่ของคุณ จากนั้นเรียกใช้ "ng เสิร์ฟ - เปิด" อีกครั้ง มันแก้ไขของฉัน หวังว่ามันจะช่วย

ฉันพบปัญหาเดียวกันใน 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 สิ่งนี้ใช้ได้สำหรับฉัน

ในกรณีของฉันฉันลืมที่จะบันทึกการเปลี่ยนแปลงในไฟล์ 'แอพ / hero.ts' หลังจากบันทึกและรีสตาร์ท ng ให้บริการปัญหาได้รับการแก้ไข

ความละเอียดของฉัน

ในกรณีของฉันฉันได้สร้างไฟล์โมเดลและทำให้มันว่างเปล่า

ดังนั้นเมื่อฉันนำเข้ามันไปยังรุ่นอื่นมันทำให้ฉันมีข้อผิดพลาด เพื่อเขียนคำนิยามเมื่อคุณสร้างไฟล์ typescript แบบ

เปลี่ยนแปลง

import{observable} from 'rxjs/observable'; 

ถึง

import{observable} from 'rxjs';

ตรวจสอบให้แน่ใจว่าคุณได้บันทึกไฟล์. TS ก่อนที่จะรวบรวม

เพิ่มสิ่งนี้ก่อนที่จะส่งออกชั้นเรียน

@Injectable({
  providedIn: 'root'
})