8

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 :)

kipy
  • 527
  • 4
  • 10
  • could you please tell what do you want to do and what is directory structure? – micronyks Oct 10 '16 at 15:54
  • 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`.. – Basheer Kharoti Oct 10 '16 at 15:56
  • @micronyks : 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). – kipy Oct 10 '16 at 16:01
  • @BasheerAhmed this is what i'm going to do if I can't figure the issue out :) – kipy Oct 10 '16 at 16:03
  • are you using `angular cli`? – Basheer Kharoti Oct 10 '16 at 16:07
  • @BasheerAhmed Yes i am – kipy Oct 10 '16 at 16:08
  • I think that would not be able to import root components through barrel.. – Basheer Kharoti Oct 10 '16 at 16:18
  • Try to export the routes before the module in the barrel – Paul Samsotha Oct 10 '16 at 16:40
  • @peeskillet it does not change anything (but thanks for the reply) – kipy Oct 10 '16 at 17:31
  • 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? – Izhaki Oct 11 '16 at 23:35
  • Sorry @Izhaki, I didn't notice your reply. I'm indeed using version 2.0.3 of TS. – kipy Oct 20 '16 at 19:18

3 Answers3

15

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.

Izhaki
  • 23,372
  • 9
  • 69
  • 107
  • "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. – kipy Oct 12 '16 at 08:36
  • @kipy, the guys at Microsoft say that this behaviour [depends on the loader, not on typescript](https://github.com/Microsoft/TypeScript/issues/4149#issuecomment-127797973). 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. – Izhaki Oct 12 '16 at 08:45
  • I think we agree on that. – kipy Oct 14 '16 at 05:58
3

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.

ktretyak
  • 27,251
  • 11
  • 40
  • 63
0

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.

Mathias F
  • 15,906
  • 22
  • 89
  • 159
  • 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 – kipy Oct 11 '16 at 06:58