Compiling fails if @Input's type is an imported interface

[Lukas-Kullmann]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.7
node: 8.4.0
os: win32 x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.7
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

Repro steps.

1. initialize a new app via ng new ... (e.g. ng new app)
2. create ./src/app/interface.d.ts with the following content:
   export interface TestInterface { }
3. Open ./src/app/app.component.ts
4. import the interface that was just created
   import { TestInterface } from './interface'
   and also import the Input decorator from @angular/core
import { Component, Input } from '@angular/core';
5. define an input to the app component that implements the interface. The whole file should look like this:

import { Component, Input } from '@angular/core';
import { TestInterface } from './interface';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  @Input() testInput: TestInterface;
}

6. run ng serve

The log given by the failure.

Webpack starts compiling the app and can, for some reason, not find './interface'.

Date: 2017-10-24T08:01:33.207Z
Hash: 20f13112a87a42126954
Time: 8268ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.15 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 217 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.3 MB [initial] [rendered]

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve './interface' in '.\src\app'
resolve './interface' in '.\src\app'
  using description file: .\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: .\package.json (relative path: ./src/app)
    using description file: .\package.json (relative path: ./src/app/interface)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        .\src\app\interface doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        .\src\app\interface.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        .\src\app\interface.js doesn't exist
      as directory
        .\src\app\interface doesn't exist
[.\src\app\interface]
[.\src\app\interface.ts]
[.\src\app\interface.js]
[.\src\app\interface]
 @ ./src/app/app.component.ts 11:0-44
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

webpack: Failed to compile.

Desired functionality.

The app should compile. I don't want to have inputs that are not typed.

Mention any other details that might be useful.

If your remove @Input() and use inputs: ['testInput'] in the @Component decorator, it compiles successfully.

The compilation also does not fail, if you would declare TestInterface in the same file as the component like this:

import { Component, Input } from '@angular/core';

interface TestInterface { }

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  @Input() testInput: TestInterface;
}

I'm sorry, if this is not an Angular CLI problem, but rather an Angular and/or Typescript problem. But I thought it would fit here best.

[filipesilva]

I think your issue is a duplicate of #7995 (comment). That comment describes the problem, and it should be fixed by #7998.

Newer versions of Angular CLI should have that sorted. Let me know if that's not the case and I will reopen.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}