How to use the reference of a Barrel file in the same folder with Typescript

Question

I’m having trouble referencing files that are in the same folder when working with a Barrel type file in my project is in Angular (version: 4.0.0). My problem is this, see the file and directory structure below:

|-app
   |-index.ts
   |-app.module.ts
   |-app.routes.ts
   |-app.component.ts 
   |-foo
      |-index.ts
      |-foo.module.ts
      |-foo.routes.ts
      |-foo.component.ts

the two files type index, contain a simple structure of files "Barrel", as shown here:

app/index.ts

export * from './app.module';
export * from './app.routes';
export * from './app.component';

app/foo/index.ts

export * from './foo.module';
export * from './foo.routes';
export * from './foo.component';

My problem is, when I’m in any file inside the directory app, I can call a Barrel reference foo, like this:

app.modulets.

import { FooRoutes, FooComponent } from './foo' // -> vai reconhecer o barrel
...

But if I inside the directory app/foo try to fetch an existing file in his own bug, says that could not find the element (returns undefined). Serial something like:

foo.modulets.

import { FooComponent } from '../foo' // -> não acha
import { FooComponent } from '..' // -> não acha
import { FooComponent } from 'foo' // -> não acha
//wtf???
...

Can someone help me solve this problem?

Answer 1

The solution was the way I was declaring the import because I should use the same logic for browsing between folders where . represents that I am looking for something in the same directory and .. in the previous directory. It would look like this then:

import { FooComponent } from '.'; // funciona
import { FooComponent } from './index'; // também funciona