Module not found when using type from .d.ts file

[Buslowicz]

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

1. Run ng init to create a new Angular project.
2. Create a d.ts file in app folder
3. Add an exported interface to the .d.ts file
4. Import above interface in component file
5. Add a property with decorator and above type (e.g. @Input() prop: MyType)
6. 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

[nikoTM]

Possibly has to do with this issue.

[Buslowicz]

Maybe, though I do refer to d.ts file without extension in the import statement.

[aaron-bond]

Why not import the .d.ts into the typings.d.ts file instead of into the component?

[Buslowicz]

Because it's generated and exports interfaces and namespaces, not declares them globally.

[filipesilva]

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

[Buslowicz]

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.

[basst314]

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

[Buslowicz]

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

[basst314]

Hi @filipesilva ,
how are we supposed to handle custom typing files like my-types.d.ts in projects running on angular-cli when we want to use them in our component inputs as @Input() element: MyType ?

As written above, regular typescript imports like import { MyType } from 'my-types' don't really work when running on a cli-project.

Do we have to register our typing-files somewhere in the cli-config to be found during the build?
Or is there a documentation or guide you can refer us to?

Any help is very much appreciated!
Thanks!

[filipesilva]

This might actually be #2034.

[basst314]

Hey @Draccoz, can you confirm that this does only happen when doing a normal jit build with ng build, but does work like a charm when building aot with ng build -aot? This is what I'm experiencing.

@filipesilva, #2034 might be related, but this one breaks the build, the other displays a warning and does not break the build. Also the concrete error message is different.
Could you please consider reopening this issue and take a look at @Draccoz github repo to reproduce the error?

Thanks!

[Buslowicz]

Confirming the above. ng build -aot works correctly, while ng build produces:

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve './types' in '/home/dracco/projects/ng2-type-import-issue/src/app'
@ ./src/app/app.component.ts 11:0-31
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts

[18steps]

Can confirm this is still an issue in Angular CLI 1.0.2

@angular/cli: 1.0.2
node: 7.10.0
os: win32 x64
@angular/animations: 4.1.1
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.2
@angular/compiler-cli: 4.1.1

[filipesilva]

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