Custom referenced typings breaks compilation

Type of Issue

[ x ] Bug Report
[   ] Feature Request

Description

This is a similar issue to that raised in https://github.com/ng-packagr/ng-packagr/issues/1007.

I have an existing angular project and library which I am trying to upgrade from angular 9 to angular 10, where the library depends on some widgets written in jQuery. I am hitting some issues getting the custom widget typings to work.

How To Reproduce

Create an angular-cli (10.0.x) project, with an angular library, as follows:

ng new my-lib-app
cd my-lib-app
ng generate library my-lib
ng generate component my-button --project my-lib

Then export ‘my-button’ component in public_api.ts and my-lib.module.ts.

Add MyLibModule to app.module.ts and then add lib-my-button into app.component.html.

ng b my-lib
ng s

Run the app, http://localhost:4200/, and you’ll see the simple component.

Now, lib-my-button depends on a widget for which we defined some typings for, these require jQuery.

npm i @types/jquery@3.5.1 -D
npm i @types/jquery@3.5.1 -S

Create a file called button-widget.d.ts in the my-button folder, consisting of:

interface ButtonWidgetOptions {
  toggleOnIcon?: string;
  toggleOffIcon?: string;
}

interface ButtonWidgetStatic {
  destroy(): void;
}

interface JQueryStatic {
  button: ButtonWidgetStatic;
}

interface JQuery {
  button(options?: ButtonWidgetOptions): JQuery;
}

Add a widgets.d.ts in the lib containing:

/// <reference path="my-button/button-widget.d.ts"/>

Add usages to my-button.component:

/// <reference path="button-widget.d.ts" />
import { Component, OnInit, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';

@Component({
  selector: 'lib-my-button',
  templateUrl: './my-button.component.html',
  styleUrls: ['./my-button.component.css']
})
export class MyButtonComponent implements OnInit, AfterViewInit, OnDestroy {
  private jQueryElement: JQuery;
  private button: ButtonWidgetStatic;

  constructor(private element: ElementRef) { }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    this.jQueryElement = jQuery(this.element.nativeElement);
    this.jQueryElement.button({});
    this.button = this.jQueryElement.data('button');
  }

  ngOnDestroy(): void {
    this.button.destroy();
  }
}

Compile the library

ng b my-lib

All okay!

Now build the app:

ng b

chunk {main} main.js, main.js.map (main) 1.98 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 668 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 341 kB [initial] [rendered]
Date: 2020-08-18T21:36:18.903Z - Hash: caa45a8954c5ca44ef23 - Time: 3167ms

ERROR in dist/my-lib/lib/my-button/my-button.component.d.ts:1:23 - error TS2688: Cannot find type definition file for 'projects/my-lib/src/lib/my-button/button-widget'.

1 /// <reference types="projects/my-lib/src/lib/my-button/button-widget" />
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

If I remove the typings reference from my-button.component the library won’t compile, if I leave it in then the consuming project fails. I am sure there is something obvious I am missing here, but I am unclear what it is.

Can you reproduce the error in the integration tests in ng-packagr?

If possible, take a look at the integration/samples and try to break one of these builds!

I will look at this, and feed back if I find anything.

Is the error you faced in an application importing the library

Try to break the Angular CLI app in integration/consumers/ng-cli!

Expected Behaviour

I would expect this to work as it did before.

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr:            10.0.4
@angular/compiler:     10.0.10
rollup:                2.10.9
tsickle:               
typescript:            3.9.7

Node: 10.16.0
OS: darwin x64

Angular: 10.0.10
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1000.6
@angular-devkit/build-angular      0.1000.6
@angular-devkit/build-ng-packagr   0.1000.6
@angular-devkit/build-optimizer    0.1000.6
@angular-devkit/build-webpack      0.1000.6
@angular-devkit/core               10.0.6
@angular-devkit/schematics         10.0.6
@angular/cli                       10.0.6
@ngtools/webpack                   10.0.6
@schematics/angular                10.0.6
@schematics/update                 0.1000.6
ng-packagr                         10.0.4
rxjs                               6.5.5
typescript                         3.9.7
webpack                            4.43.0

[alan-agius4]

Hi @bthharper, that is now expected because .d.ts file inputs don’t get emitted by the TSC compiler. In previous versions this used to work via a hack, we can no longer be leveraged, and in this case I think it’s best to keep the default TSC behaviour.

There are two solutions for this;

1. rename your .d.ts to .ts
2. copy the .d.ts to the dist folder using the assets option https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

[github-actions[bot]]

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

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