CODEWITHSUNDEEP
angulartypescript
Myonara
Myonara

Reputation: 1207

An interface cannot be exported in an angular 2 module?

I tried to export an interface in a NgModule-declaration and export and getting this error already in the editor (Visual Studio Code): [ts] 'MyInterface' only refers to a type, but is being used as a value here.

Here is the example code Edit-1:

import { NgModule }           from '@angular/core';
import { CommonModule }       from '@angular/common';
import { FormsModule }        from '@angular/forms';
import { MaterialModule }     from '@angular/material';
import { MyInterface }        from './my.interface';
import { MyService }          from './my.service';

@NgModule({
  imports:      [ CommonModule, FormsModule,  MaterialModule.forRoot()  ],
  declarations: [ MyInterface],//<- this is causing the message
  exports:      [ MyInterface],
  providers:    [ MyService ]
})
export class MyModule { }

One part of an explanation I found in the answer to this post: "since interfaces are erased at runtime in TypeScript". I'm currently refactoring my app to feature modules, so I cannot test it right now: Can I use the interfaces only by import from './mypathto/my.interface'?

Upvotes: 25

Views: 22838

Answers (2)

Poul Kruijt
Poul Kruijt

Reputation: 71921

You cannot export an interface. You can only export:

  1. Other modules
  2. Components
  3. Directives
  4. Pipes

NgModule is an angular concept and should not be confused with a typescript module. To make a third party, who uses your module, able to use your interface, you should create a .d.ts definition file with your module.

If you want to use a interface inside another NgModule of yours, you should just use:

import {InterfaceName} from 'path/to/ngmodule/to/interface';

Also, do not put an interface in the declarations array, this is only used for pipes/components/directives.

If you want your interface to be usable outside of an library, you should add it to the export of your index.ts:

export {InterfaceName} from 'path/to/ngmodule/to/interface';

Upvotes: 38

trojan
trojan

Reputation: 1535

Well actually you can export an interface, but not the way you are trying to do.

First generate interfaces.ts file by typing

ng g interface <interface_name>

Example of interface file:

export interface Auction{ $key?:string; $auctioneer:string;  ... }
export interface Item{ $key?:string; condition?:string; description?:string; ...}
export interface Bid{  $key?:string;  amount:number;  auction:string; ...}

After modifying the file to your needs you can import just one, all or chosen interfaces like this:

import { Auction } from './interfaces';

or

import * as interfaces from './interfaces'; 
// then you have to call interfaces.Auction

If per chance you know how to share interfaces globally pls. let me know here: Angular how to share interfaces across the app

Upvotes: 8

Related Questions