angular-cli: Module not found when using type from .d.ts file

I started this issue on angular/angular issues, but seems to be related to CLI, so just copy-pasting the issue here 😃.

I’m submitting a …

[x] bug report

Current behavior When assigning a custom type (like Post, or User) to a decorated property (with either ng decorator like @Input() or a custom one), where type is declared in d.ts file, angular throws an error:

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve './types' in '/home/dracco/projects/ng2/src/app'
 @ ./src/app/app.component.ts 11:0-31
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
webpack: Failed to compile.

This does not happen if:

type is added through generic (like Array<Post>) OR
no decorator is added to property OR
file with declaration has .ts extension instead of .d.ts

Expected behavior No error should be thrown. property should have given type.

Minimal reproduction of the problem with instructions

Run ng init to create a new Angular project.
Create a d.ts file in app folder
Add an exported interface to the .d.ts file
Import above interface in component file
Add a property with decorator and above type (e.g. @Input() prop: MyType)
Run ng serve

What is the motivation / use case for changing the behavior? The default workflow in TypeScript suggests keeping declarations and interfaces in .d.ts file. Simple Angular components might not use Observables and still accept data from the host. I am actually surprised nobody mentioned and solved it so far as it is pretty severe (it also happens in 4.0.0-beta.8).

Please tell us about your environment:

OS: linux x64 (Ubuntu 16.10)
Angular version: 2.3.1, 2.2.4, 4.0.0-beta.8
Angular CLI version: 1.0.0-beta.28.3
Node (for AoT issues): 7.5.0
NPM: 4.1.2

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 16
Comments: 40 (6 by maintainers)

Links to this issue

Typescript, index.d.ts and webpack: Module not found error - Stack Overflow

Most upvoted comments

They said it’s cli issue. Is Angular and CLI 2 separate products? If not, do cooperate. This issue does not happen if using webpack starter, so I don’t believe it’s issue on Angular or TypeScript side itself. Please reopen this issue and investigate it if you want people to believe that Angular is a serious platform.

+23

Buslowicz on Mar 13, 2017

This isn’t a CLI issue, but rather a TypeScript/Angular issue.

+17

filipesilva on Mar 13, 2017

@hansl let’s get some kind of resolution please?

+14

vmorris on Nov 17, 2017

any news on this? it’s pretty annoying!

+10

artparks on Jun 2, 2017

I can confirm this issue, @Draccoz @filipesilva .

It does not happen when you change the filename from .d.ts to .ts. It also does not happen when you change your import from import { Something } from 'yourlib'; to import { Something } from 'yourlib.d';

I just moved a working project from a webpack-starter seed (TypeScript/Angular) to CLI and got this error, so I assume it has something to do with the generated CLI project.

I’m using @angular/cli: 1.0.0-rc.2

basst314 on Mar 17, 2017

Thanks @basst314. I’m afraid though that @filipesilva doesn’t care about it at all.

Buslowicz on Mar 17, 2017

@filipesilva and @hansl can you estimate when there will be time to fix this issue? I see it has been labeled ‘priotity urgent’ but so far nothing has happened.

basst314 on Aug 8, 2017

I can also confirm what @PhotoPaul said.

This is a serious issue, I hope it can be solved as soon as possible.

FrancescoBorzi on Nov 4, 2017

Does anyone have a workaround for this (aside from using the any type on the input)?

[edit]: a workaround for anyone following along is to declare the property with an intersection type:

export class FooComponent {
  @Input() public foo: IFoo; // does not work
  @Input() public foo: IFoo & { }; // works
}

marshall007 on Jul 20, 2017

Another workaround similar to marshall007’s is to declare it like this:

export class FooComponent { @Input() public foo: IFoo; // does not work @Input() public foo: IFoo | any; // works }

PhotoPaul on Oct 18, 2017

Same here. Not using cli and get the same error. You can see that index.d.ts is never looked for if you follow the whole thing through.

ERROR in ./src/app/menu/menu.component.ts
Module not found: Error: Can't resolve './shared' in 'D:\Development\client\src\app\menu'
resolve './shared' in 'D:\Development\client\src\app\menu'
  using description file: D:\Development\client\package.json (relative path: ./src/app/menu)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Development\client\package.json (relative path: ./src/app/menu)
    using description file: D:\Development\client\package.json (relative path: ./src/app/menu/shared)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\Development\client\src\app\menu\shared is not a file
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\Development\client\src\app\menu\shared.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\Development\client\src\app\menu\shared.js doesn't exist
      as directory
        existing directory
          using path: D:\Development\client\src\app\menu\shared\index
            using description file: D:\Development\client\package.json (relative path: ./src/app/menu/shared/index)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                D:\Development\client\src\app\menu\shared\index doesn't exist
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                D:\Development\client\src\app\menu\shared\index.ts doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                D:\Development\client\src\app\menu\shared\index.js doesn't exist
[D:\Development\client\src\app\menu\shared]
[D:\Development\client\src\app\menu\shared.ts]
[D:\Development\client\src\app\menu\shared.js]
[D:\Development\client\src\app\menu\shared\index]
[D:\Development\client\src\app\menu\shared\index.ts]
[D:\Development\client\src\app\menu\shared\index.js]

Asken on Sep 13, 2017

@basst314 you’re right, #2034 is a warning and this is an error. Reopening.

filipesilva on May 9, 2017