Edit 2

nav-bar.component.ts

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

      

        
        
        
      

    

nav-bar-link.component.ts

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

      

        
        
        
      

    

Edit 1

I am using Webstorm, which recognizes the type when I use it in nav-bar-link.component.ts, and by admitting, I mean if I click on the control I will cast to the definition file. I am using ng build to compile all of this, which also uses the following 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"
    ]
}

      

        
        
        
      

    

I tried to create a samples folder with index.d.ts in it with all the interfaces I created, but even then the nav-bar-link component will give the same error as in the original description.

Original post

I am trying to share the type definition files between the server and the client, and so I installed the definition file above the client and server files. I am importing the type definition into both angular components, but the nav-bar-link line throws this error.

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  

      

        
        
        
      

    

Folder structure

• nav bar /
  • nav-bar.d.ts
  • Server /
  • customer /
    • nav-bar.component.ts
    • nav-bar.component.html
    • nav-bar.component.scss
    • link /
      • nav-bar-link.component.ts
      • nav-bar-link.component.html
      • nav-bar-link.component.scss

nav-bar.d.ts

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

      

        
        
        
      

    

I tried to move the nav-bar-link to a separate "module" so in the sibling folder to the nav-bar and it still throws the same error when I try to import ILink.

How can I use this interface for both components without throwing this error?