25

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

4
  • Post your code. exporting and importing interfaces works just fine here.
    – JB Nizet
    Feb 19, 2017 at 20:30
  • 1
    Where do you want to use it? As provider? I tried to export an interface in a NgModule-declaration what do you mean?
    – yurzui
    Feb 19, 2017 at 20:30
  • 1
    Take a look at documentation angular.io/docs/ts/latest/guide/…
    – yurzui
    Feb 19, 2017 at 20:34
  • I have added the example code to the question. Thanks @yurzui, your link is answering the question: "TypeScript interfaces aren't valid tokens".
    – Myonara
    Feb 20, 2017 at 2:04

2 Answers 2

38

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';
2
  • 2
    Thanks PierreDuc for the "complete answer", that clarifies a lot. I found this documentation on .d.ts.
    – Myonara
    Feb 20, 2017 at 10:02
  • But, how do I communicate to a third party, that incoming data to a library should follow a certain schema, which I'd like to specify inside an interface? This would make it easier, for example when publishing a node package on npm, would'nt it? Feb 17, 2019 at 17:46
8

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.