CODEWITHSUNDEEP
angulartypescript
HaveSpacesuit
HaveSpacesuit

Reputation: 4014

Export Typescript interface from Angular module

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?

Upvotes: 6

Views: 21487

Answers (3)

Frederick Rosales
Frederick Rosales

Reputation: 189

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

Upvotes: 2

alehn96
alehn96

Reputation: 1393

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

Upvotes: 3

Daniel Rosenwasser
Daniel Rosenwasser

Reputation: 23493

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.

Upvotes: 2

Related Questions