typescript - ประเภทกำหนดเองแสดงข้อผิดพลาด "ไม่พบโมดูล" ใน Angular

แก้ไข 2

nav-bar.component.ts

...
import { ILink } from '../nav-bar';
...

nav-bar-link.component.ts

...
import { ILink } from '../../nav-bar';
...

แก้ไข 1

ฉันกำลังใช้ Webstorm ซึ่งสามารถรับรู้ประเภทเมื่อฉันใช้มันใน nav-bar-link.component.ts และโดยการรับรู้ ฉันหมายความว่าถ้าฉันกดควบคุมคลิกที่ประเภท มันจะพาฉันไปยังไฟล์คำนิยาม ฉันกำลังใช้ ng build เพื่อคอมไพล์ทั้งหมด ซึ่งก็กำลังใช้ tsconfig.json ดังต่อไปนี้ด้วย

tsconfig.json

{  
    "compilerOptions": {
        "baseUrl": "",
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "es2016",
            "dom"
        ],
        "mapRoot": "./",
        "module": "es6",
        "moduleResolution": "node",
        "outDir": "../dist/out-tsc",
        "sourceMap": true,
        "target": "es5",
        "typeRoots": [
            "../node_modules/@types"
        ]
    },
    "files": [
        "main.ts",
        "polyfills.ts"
    ],
    "include": [
        "**/client/**/*.ts",
        "**/*.d.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

ฉันได้ลองสร้างโฟลเดอร์ typings พร้อมกับไฟล์ index.d.ts ที่มีอินเทอร์เฟซทั้งหมดที่ฉันสร้างขึ้น แต่แม้กระนั้น components nav-bar-link ก็ยังแสดงข้อผิดพลาดเหมือนที่ได้อธิบายไว้เดิม

โพสต์ต้นฉบับ

ฉันพยายามที่จะแชร์ไฟล์การกำหนดชนิดระหว่างเซิร์ฟเวอร์และไคลเอนต์ ดังนั้นฉันจึงวางไฟล์การกำหนดชนิดไว้เหนือไฟล์ของไคลเอนต์และเซิร์ฟเวอร์ ฉันกำลังนำเข้าการกำหนดชนิดไปยังทั้งสองคอมโพเนนต์ของ Angular แต่ nav-bar-link กลับแสดงข้อผิดพลาดนี้

ERROR in ./src/app/nav-bar/client/link/nav-bar-link.component.ts  
Module not found: Error: Can't resolve '../../nav-bar' in 'D:\example-app\src\app\nav-bar\client\link'  
@ ./src/app/nav-bar/client/link/nav-bar-link.component.ts 11:0-38  
@ ./src/app/app.module.ts  
@ ./src/main.  
@ multi ./src/main.ts  

โครงสร้างโฟลเดอร์

• แถบนำทาง/

  • nav-bar.d.ts
  • เซิร์ฟเวอร์/

  • ลูกค้า/

    • nav-bar.component.ts
    • nav-bar.component.html
    • nav-bar.component.scss

    • ลิงก์/

      • nav-bar-link.component.ts
      • nav-bar-link.component.html
      • nav-bar-link.component.scss

nav-bar.d.ts

export interface ILink {
    title: string;
    ...
}

ฉันได้พยายามย้าย nav-bar-link ไปยัง "โมดูล" แยกต่างหาก ดังนั้นให้อยู่ในโฟลเดอร์พี่น้องกับ nav-bar และมันยังคงแสดงข้อผิดพลาดเดียวกันเมื่อฉันพยายามนำเข้า ILink

ฉันจะใช้อินเทอร์เฟซนั้นในทั้งสองคอมโพเนนต์ได้อย่างไรโดยไม่ให้เกิดข้อผิดพลาดนั้น?