CODEWITHSUNDEEP
angulartypescriptecmascript-6
Jay Dee
Jay Dee

Reputation: 2656

Cannot import exported interface - export not found

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

Upvotes: 40

Views: 39254

Answers (7)

Vali Jafarov
Vali Jafarov

Reputation: 1

Deleting .Angular folder and re-running app works for me and my colleagues.

Upvotes: 0

lokers
lokers

Reputation: 2198

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

Upvotes: 57

Rui Marques
Rui Marques

Reputation: 8904

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.

Upvotes: 24

Daniel Flippance
Daniel Flippance

Reputation: 7932

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

Upvotes: 1

KTCO
KTCO

Reputation: 2203

This worked for me:

@Input() bar: B | null;

Using Angular 4.4.3 + Typescript 2.3.4

Upvotes: 2

MCattle
MCattle

Reputation: 3167

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

@Input() bar: B | B;

Upvotes: 5

Jay Dee
Jay Dee

Reputation: 2656

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.

Upvotes: 21

Related Questions