Can't resolve all parameters for Dummy1Component: (?, ?) when importing from module index

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I have a project structured as following:

src ---- app -------- app.module.ts -------- app.component.ts -------- app.component.html -------- app.component.css -------- core ----------- core.module.ts ----------- components -------------- component1 … component14 -------------- index.ts ----------- model -------------- model1… model14 -------------- index.ts ----------- services -------------- service1… service14 -------------- index.ts ----------- index.ts

So each component, model and service in the coremodule is exported in its own index file. Every indexfile and the module is exported in the core/index.ts

In component1 i’d like to import a service, from the module-index:

import { Component, OnInit } from '@angular/core';
import { Dummy1Service, Dummy2Service } from '../../index'; // Does not work
// import { Dummy1Service, Dummy2Service} from '../../services'; // Does work
import { Dummy1 } from '../../model'
@Component({
  selector: 'app-dummy1',
  templateUrl: './dummy1.component.html',
  styleUrls: ['./dummy1.component.css']
})
export class Dummy1Component implements OnInit {

  constructor(private _dummy: Dummy1Service, private _dummy2: Dummy2Service) { }

  private dummy: Dummy1 = new Dummy1();

  ngOnInit() {
    this._dummy.test();
    this._dummy2.test();
    this.dummy.name = 'test';
  }

}

This leads to following error:

preview-a0eab20a3cf429f662ce.js:1 Error: Can't resolve all parameters for Dummy1Component: (?, ?).
  Evaluating https://angular-nix59s.stackblitz.io/tmp/appfiles/main.ts
  Loading blitzapp
    at syntaxError (util.js:176)
    at CompileMetadataResolver._getDependenciesMetadata (metadata_resolver.js:1128)
    at CompileMetadataResolver._getTypeMetadata (metadata_resolver.js:961)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (metadata_resolver.js:473)
    at CompileMetadataResolver.loadDirectiveMetadata (metadata_resolver.js:328)
    at eval (compiler.js:218)
    at Array.forEach (<anonymous>)
    at eval (compiler.js:217)
    at Array.forEach (<anonymous>)
    at JitCompiler._loadModules (compiler.js:214)

I thought, maybe it is because of a circle dependency, but this works - Dummy10Service is referenced in .‘./index’ too.

import { Injectable } from '@angular/core';
import { Dummy1Service} from '../index' // Why does this work?
@Injectable()
export class Dummy10Service {

  constructor(private _dummy: Dummy1Service) { }
  public test(): void {
    console.log('test');
  }
}

First i thought it was a bug of webpack, because WEBPACK_IMPORTED_MODULE_1 (the index-file, referring too) had entries from ‘a’ to ‘z’ (24), but my indexfile had exported over 35 files, so it seems that there are some entries missing.

edit: seems it does work with AOT instead of JIT compilation.

Expected behavior

Let import from top index file, regardless of components count.

Minimal reproduction of the problem with instructions

i made a small repro on stackblitz - uncomment the code on /app/core/components/dummy1/dummy1.component.ts if you want to see the working example. Just visit to see the error.

https://stackblitz.com/edit/angular-nix59s

What is the motivation / use case for changing the behavior?

Webstorm did a suggestion to change it from import { Dummy1Service} from '../../services/dummy1.service' to import { Dummy1Service} from '../../' But after try it again it now changes it to import { Dummy1Service} from '../../services

Environment

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.5
Node: 8.9.4
OS: win32 x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.17
typescript: 2.4.2
webpack: 3.10.0

Angular version: 5.0.0

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.9.4
- Platform:  Windows

Others:

[trotyl]

The way of working is: when raising an Angular bug, one should prove why this is real Angular problem rather then other parts (cannot be reproduced without using Angular).

Since you can already observe the importing result (undefined when running), so that’s not caused by Angular. Whether TypeScript implemented the correct semantics of ES module is another story (note the module tsconfig options, those semantics cannot be emulated in commonjs output, but system format is designed to follow ES module with a polyfillable way).

For information about circular dependency problem in ES module, it should be easy to search on Google, like: https://medium.com/content-uneditable/circular-dependencies-in-javascript-a-k-a-coding-is-not-a-rock-paper-scissors-game-9c2a9eccd4bc, http://2ality.com/2014/09/es6-modules-final.html#support-for-cyclic-dependencies-between-modules

[trotyl]

Not an Angular bug, just normal circular dependency problem, simpler repro: https://stackblitz.com/edit/angular-rwyrrc?file=app%2Fapp.component.ts

Angular cannot get the metadata since it does not exist at all, not even possible for a better error message.