Cannot import exported interface - export not found

Question

I reduced the problem to this example:

test.model.ts

export class A { a: number; } export interface B { b: number; } 

test.component.ts

 import { Component, Input } from '@angular/core'; import { A, B } from './test.model'; @Component({ selector: 'test', template: '<h1>test</h1>' }) export class TestComponent { //This works fine @Input() foo: A; //Does NOT work - export 'B' was not found in './test.model' @Input() bar: B; } 

When I want to use the interface , I get the following warning:

 WARNING in ./src/app/.../test.component.ts 21:76 export 'B' was not found in './test.model' 

However, using the class is fine. Any hint?

UPDATE . Something seems to be related to this issue: https://github.com/webpack/webpack/issues/2977

Answer 1

Yesterday I found another question here and its decision to declare the exported interface as a separate file. With one interface per file, it works for me without any warnings.

Answer 2

Another approach to removing the warning is to use a slightly unpleasant hack to integrate the interface with itself .

 @Input() bar: B | B; 

Answer 3

This worked for me:

 @Input() bar: B | null; 

Using Angular 4.4.3 + Typescript 2.3.4