Export Typescript interface from Angular module

Question

I've got a Typescript interface IBreadcrumbNavigation I'm exporting. I can use it in an Angular component with import { IBreadcrumbNavigation } from 'app/shared/interfaces/breadcrumbNavigation';

However, the component's module already imports a SharedModule. I'd like to put the IBreadcrumbNavigation interface in the SharedModule so that I don't need to explicitly import it into each component that wants to use it.

In my SharedModule I've got

import { IBreadcrumbNavigation } from './interfaces/breadcrumbNavigation';

@NgModule({
    declarations: [
        IBreadcrumbNavigation
    ],
    exports: [
        IBreadcrumbNavigation
    ]
})
export class SharedModule { };

TypeScript gives the error "'IBreadcrumbNavigation' only refers to a type, but is being used as a value here."

If I change IBreadcrumbNavigation from an interface to a class, the error goes away.

Is there a good fix to this, or do I just need to explicitly import the interface directly into each component?

can we see the component module

Emeka Obianom
– Emeka Obianom

2017-06-29 16:39:10 +00:00
Commented Jun 29, 2017 at 16:39 — Emeka Obianom
– Emeka Obianom, Commented Jun 29, 2017 at 16:39

alehn96 · Accepted Answer · 2017-06-29 16:45:27Z

3

If it is not a component, pipe, directive, module, you only import the interface in the module that you want. The interface must be exported

in './interfaces/breadcrumbNavigation';

export interface IBreadcrumbNavigation {
   ...
}

In x component from other module you only import the interface

import { IBreadcrumbNavigation } from 'pathToOtherModule/interfaces/breadcrumbNavigation';

edited Jun 29, 2017 at 16:45

answered Jun 29, 2017 at 16:31

alehn96

1,4031 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Rosenwasser · Accepted Answer · 2017-06-29 16:32:24Z

Is there a good fix to this,

Like the error messages say, interfaces don't actually declare anything that exists at runtime. They exist purely at compile-time for TypeScript and are erased away. So it doesn't make sense to put them in an array for a decorator, since those do exist at runtime.

It sounds like converting to a class is what would fix it, but it's likely that you should be exporting the concrete implementers of these interfaces.

From the docs:

Add declarable classes — components, directives, and pipes — to a declarations list.

Declare these classes in exactly one module of the application. Declare them in this module if they belong to this module.

do I just need to explicitly import the interface directly into each component?

You do need to do this - keep in mind that NgModule doesn't automatically import other ECMAScript/TypeScript modules for you. Outside of templates, you'll have to take care of this yourself.

Frederick Rosales · Accepted Answer · 2020-11-07 23:58:16Z

2

It is not possible as they exist in runtime, one workaround is to export IBreadcrumbNavigation instead of Import

export{ IBreadcrumbNavigation } from './interfaces/breadcrumbNavigation';

@NgModule({
    declarations: [
        IBreadcrumbNavigation
    ],
    exports: [
        IBreadcrumbNavigation
    ]
})
export class SharedModule { };

then create a public api file to access it like this

export * from './lib/SharedModule ';

then on the component you may do like this

import {IBreadcrumbNavigation } from 'publicApi';

answered Nov 7, 2020 at 23:58

Frederick Rosales

1891 silver badge4 bronze badges

Collectives™ on Stack Overflow

Export Typescript interface from Angular module

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related