Cannot resolve import from index.ts from script located in same directory

Question

I'm working on an angular 2 project written in TypeScript 2 and i'm currently facing an issue with the imports mechanism.

Every sub-folder of my project has an "index.ts" file inside, that is exporting classes the said folder contains.

So, in my "app" directory, I have

• app.component.ts
• app.module.ts
• app.routes.ts

And then, an index.ts file containing :

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

My issue is that I'm not able to import the exported classes from a file that is located in this same directory.

E.g., in my app.module.ts, I want to import the app component. If I do :

import { AppComponent } from './app.component';

Everything work fine ! No error at compile time and runtime. Life is cool, life is beautiful.

But I can't do the following :

import { AppComponent } from '.'; // or './', or even './index'

The IDE (Visual Studio) actually resolves the import correctly (it compiles with no errors). I even get autocompletion from Intellisence...

But I get this error at runtime :

 Error: Unexpected value 'undefined' imported by the module 'AppModule'

And I just don't know why.

Note : I don't have any error by importing from index.ts from subfolders (e.g. I can do import from './core' that also has an index).

Thank you in advance :)

Barogram

could you please tell what do you want to do and what is directory structure? – Spoon

I got ur question and I had the same problem earlier but didn't try to resolve that but instead used the first approach using .\app.component.. – Hyperform

@Spoon : I just want to import classes that are exported in a index.ts file. This actually work, but not when I'm trying to import them in a script that is located in the same directory. (I gave my minimalistic directory structure already). – Barogram

@BasheerAhmed this is what i'm going to do if I can't figure the issue out :) – Barogram

are you using angular cli? – Hyperform

@BasheerAhmed Yes i am – Barogram

I think that would not be able to import root components through barrel.. – Hyperform

Try to export the routes before the module in the barrel – Kg

@peeskillet it does not change anything (but thanks for the reply) – Barogram

I have landed on this question as I'm also experiencing similar (very odd) issues, right after upgrading typescript to version 2.0.3; ../../viewees/shapes/ doesn't work with index.ts on that folder, but ../../viewees/shapes/Rectangle does work. Which typescript version are you using? – Expiable

Sorry @Izhaki, I didn't notice your reply. I'm indeed using version 2.0.3 of TS. – Barogram

Answer 1

I have had exactly the same issue.

You seem to have circular dependency.

When you write this:

import { AppComponent } from '.';

the resolver goes to index.ts and sees this:

export * from './app.component';

so then it goes to ./app.component and sees this:

import { AppComponent } from '.';

so it goes to index.ts and sees this:

export * from './app.component';

And so on and so forth...

What's odd about this is that you get no warnings, and, depending on the loader, it may actually resolve correctly second time around (so first time you get undefined but in subsequent calls it resolves correctly) - I've spent 4 hours because of a far-less-obvious circular dependency. I strongly argue typescript should raise a warning on these things because it's a proper can of worms.

Expiable

"What's odd about this is that you get no warnings" exactly, and that's why we think it's a bug :) Thank for your reply ! I've changed my scripts to point directly to the "class contained" files. – Barogram

@kipy, the guys at Microsoft say that this behaviour depends on the loader, not on typescript. Whilst they're somewhat right, I don't really see any reason for a warning not to be raised - it is a clear potential sources of bugs. – Expiable

I think we agree on that. – Barogram

Answer 2

To avoid circular dependency, just don't:

import { SomeClass } from './path/to/index';

Instead, use directly path to the file:

import { SomeClass } from './path/to/some-class';

This does not apply to the modules that you import from the node_modules.

Johnsonian

Answer 3

This might be a resharper error message. Do you have resharper installed? Can you disable it and try again?

If it is a resharper error set the version of Typescript in Resharper options.

I had a 9.x version of resharper and it only got me to Typescript 1.6. I had to update to 10.x to get to 2.0.

Conrad

I don't use resharper. The error message comes from the browser, not from the IDE nor typescript compiler (tsc). The script compiles well with the builtin tsc in VS (2.0) and even with the node module included with angular-cli (there is no error while serving the project with "ng serve" or packaging it with "ng pack") The error appears only in runtime, while browsing (no matter which browser I use). Thank you for your reply – Barogram