False Positive: "ElementRef" and "Renderer2" are imported from external module "@angular/core" but never used

[SuperITMan]

Relates to #710

Type of Issue

[X] Bug Report
[ ] Feature Request

Description

A warning is logged if using Renderer2 or ElementRef in the constructor of a component.

constructor(public renderer: Renderer2, public elementRef: ElementRef) { } 

See the full log:

$ npm run build

> demo-ng-packagr-warning-import@0.0.0 build
> ng build

Building Angular Package

------------------------------------------------------------------------------
Building entry point 'demo'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy partial compilation mode.
⠋ Bundling to FESM2015WARNING: "ElementRef" and "Renderer2" are imported from external module "@angular/core" but never used in "dist/demo/esm2015/lib/demo.component.js", "dist/demo/esm2015/lib/demo.service.js" and "dist/demo/esm2015/lib/demo.module.js".
✔ Bundling to FESM2015
✔ Bundling to UMD
✔ Writing package metadata
✔ Built demo

------------------------------------------------------------------------------
Built Angular Package
 - from: /dev/demo-ng-packagr-warning-import/projects/demo
 - to:   /dev/demo-ng-packagr-warning-import/dist/demo
------------------------------------------------------------------------------

Build at: 2021-08-23T22:54:33.297Z - Time: 3416ms

How To Reproduce

Clone repository https://github.com/SuperITMan/demo-ng-packagr-warning-import then run npm run build.

According to the following comment:

This TypeScript option has a fundamental design limitation with ES2015+ code and is best avoided when targeting such output. As such this is an issue with TypeScript itself and not Angular.

Angular 8+ no longer requires the option. It was also previously only required for JIT mode which is typically only used in development.

Originally posted by @clydin in angular/angular-cli#15077 (comment)

To remove the issue, disable emitDecoratorMetadata in tsconfig.json file.

Expected Behaviour

Not having any warning.

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr:            12.2.0
@angular/compiler:     12.2.2
rollup:                2.56.3
typescript:            4.3.5
node: 12.22.1
npm/yarn: 7.12.1

Please include all version numbers that might be relevant, e.g. third-party libraries

[alan-agius4]

What's the reason of using emitDecoratorMetadata? This doesn't need to be used since Angular version 8.

[SuperITMan]

Hey @alan-agius4
Thanks for your quick answer.

I'm currently working on the upgrade of our framework (NationalBankBelgium/stark) from NG7 to NG12. When jumping from ng7 to ng8, I didn't see any information regarding emitDecoratorMetadata which is no longer necessary.
The only information I found was in Angular git history:

angular/angular@70341bc

build(docs-infra): update docs examples to Angular v11.2.10 (#41689)

This commit updates the docs examples to Angular v11.2.10. See the [diff between 11.0.1 and 11.2.10 (FW) and 11.2.9 (CLI)][1].

The changes are fairly trivial including:

- Removal of `emitDecoratorMetadata` from tsconfig.json files, where no JIT compilation is required.
- Setting `enableI18nLegacyMessageIdFormat` to `false` for CLI based applications - the i18n example was already migrated away from legacy message IDs.

Would you have more information about this change? 😊

[alan-agius4]

emitDecoratorMetadata is only needed if you have custom decorators that use Metadata Reflection API.
See: https://www.typescriptlang.org/docs/handbook/decorators.html#metadata

[github-actions]

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.}