CODEWITHSUNDEEP
angulartypescripttypescript-typings
canpan14
canpan14

Reputation: 1273

Angular fails to find interface import

I have an interface:

export interface MyInterface {
  id: number;
  name: string;
}

With an index.ts file in the same folder:

export * from './my-interface';

And a component where I'm using the interface (details removed, models is the folder the index and interface sit in):

...
import { MyInterface } from 'src/app/common/models';

@Component({
  ...
})
export class MyComponent implements OnInit {
  ...
}

The component works normally and there are no issues. I wanted to start creating my own type interfaces but I keep getting this error, pointing at my component file:

Cannot find module 'src/app/common/models'.

Note: this is the path to where the index file and interface sit.

I'm not quite sure what this error wants from me. The component is correctly imported in app.modules so I'm not sure what else to do.

Upvotes: 2

Views: 4031

Answers (2)

Reactgular
Reactgular

Reputation: 54771

Cannot find module 'src/app/common/models'

Means that the TypeScript compiler can not resolve the path to the index.ts file.

Try using a relative path instead.

import { MyInterface } from '../../app/common/models';

Where the number of ../ depends upon the location of the folder.

Also, make sure you restart ng serve --watch when adding barrels to a project. I've found that TypeScript caching will sometimes not pick up the change.

Upvotes: 3

Iulia Dobra
Iulia Dobra

Reputation: 1

Is "models" a directory? Because you should import a ts file. In your case might be

import { MyInterface } from 'src/app/common/models/my-interface'

Upvotes: -1

Related Questions