Export Typescript interface from Angular module

user_2908576 0
Viewed 14743

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?

angular typescript
3 Answers

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