Cannot import exported interface - export not found

Question

I reduced the issue 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 an interface I get following warning:

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

However, using a class is OK. Any hint?

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

Answer 1

The root cause is in Typescript and transpilation. Once TypeScript code is transpiled, interfaces/types are gone. They don't exist anymore in the emitted files.

While the types are erased, the imports/exports aren't necessarily. The reason is that there are ambiguities and that the compiler doesn't always know for sure whether something that is exported is a type or a value.

When using TypeScript 3.8 and up, all you need to do in your test.component.ts is simply this:

import { A } from './test.model'; import type { B } from './test.model';