Reputation: 4014
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
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
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
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.
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