Angular 2 and Typescript - Importing multiple interfaces from a single file

Question

I've tried searching high and low for an answer to this but hopefully someone will be able to answer this quickly.

I have a Angular 2 app and I'm using Typescript interfaces to help structure various bits of data. The issue is that I have one file with multiple interfaces and when I try to import that into a component, the first interface can be referenced without problems, but the second one causes an error.

For example ...

myapp.model.ts
  export interface IObjectA { id: number; name: string; }
  export interface IObjectB { id: number; related: IObjectA[]; }

myapp.component.ts
  import { IObjectB } from './myapp.model';

This results in the Angular CLI compiler to fail with the error ...

... myapp.model.ts is not a module ...

I can't seem to work out how to solve this one. I'm sure I'm missing something very obvious, but you know what they say about a second pair of eyes.

Answer 1

It seems this issue was caused by a problem with my angular cli compiler (the one that is started with NG SERVE). Once I stopped and restarted NG SERVE, the issue went away. I could have multiple interfaces in one file and successfully import them into my components.

For everyone's information, I'm running (ng -v) ...

• Angular 4.0.1
• @angular/cli 1.0.0
• Node 7.5.0
• Typescript 2.2.2

Hopefully that helps...

Answer 2

Make your interfaces in each separate file. I.e make objectA.ts and objectB.ts I think this is a bug in angular-cli. If you want to dig deeper take a look at this