40

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

6
  • Isn't this already answered here? stackoverflow.com/questions/30270084/…
    – Petr Adam
    Nov 28, 2016 at 10:33
  • 2
    I don't think so - that issue deals with default export that I don't use. Thanks anyway.
    – Jay Dee
    Nov 28, 2016 at 10:36
  • 1
    ah sorry, didn't read properly
    – Petr Adam
    Nov 28, 2016 at 10:45
  • Is this a runtime or compile error?
    – philipooo
    Nov 28, 2016 at 12:55
  • It is a compile warning.
    – Jay Dee
    Nov 28, 2016 at 14:09

6 Answers 6

52

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';
24

You might also be able to fix that by using a new feature in Typescript 3.8 called Type-Only Imports and Exports.

So it means you can import the problematic type A like this:

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

Also be aware that Angular only seems to support Typescript 3.8 from Angular 9.1 and above.

I also recommend reading this "Leveraging Type-Only imports and exports with TypeScript 3.8" post for more details.

0
20

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

2
  • 7
    This worked for me and here's an explanation of why: github.com/angular/angular-cli/issues/…
    – Chris
    Jul 18, 2017 at 20:01
  • 1
    I am getting this error even if it is the only interface in the file though (but there is also other exports, such as a mergeInterfaces(left, right) method). This seems like an honest bug, not a feature. Apr 30, 2020 at 14:13
5

Another approach to removing the warning is the slightly distasteful hack of a union of the interface with itself.

@Input() bar: B | B;
2

This worked for me:

@Input() bar: B | null;

Using Angular 4.4.3 + Typescript 2.3.4

1
  • This will work if you're allowing null as a valid input value (otherwise it'll violate type safety).
    – MCattle
    Dec 5, 2017 at 21:00
1

I have this error with an interface defined in it's own myinterface.ts file and then running Karma tests. I don't see the issue when running ng serve. Adding 1 more export of an unused const to the myinterface.ts file solved the issue:

export interface IMyInterface {
    ...
}
export const A = 'A';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.