ng-packagr: False Positive: 'QueryList' is imported from external module '@angular/core' but never used

any progress here?

Hi! This issue will gone if you will use import type from Typescript 3.8

For example:

import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core'
...

import type { ElementRef, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
...

It works nice for ng-packagr@10.0.0

Also happens with TemplateRef, I’m using it as a type: @ViewChild('my-template') myTemplate: TemplateRef<any>

And when compiling it says: 'TemplateRef' is imported from external module '@angular/core' but never used

I know this won’t cause a problem, that’s why i said in the title it is a false positive 😁

To all those commenting specific cases:

This will happen with any Class you import then use only as a type definition.

As already linked above this is a duplicate of: angular/angular#21280

Just ignore this warning, that is the best solution 😃

Sorry, i cannot share ny project files.

This issue is easily reproducible, just use the @ContentChildren with QueryList type.

This warning went away when I switched to Ivy builds and disabled emitDecoratorMetadata for libraries:

tsconfig.js:

  "compilerOptions": {
---    "emitDecoratorMetadata": true,
  },
  "angularCompilerOptions": {
+++    "enableIvy": true
  },

Admittedly this isn’t (yet) a viable workaround if you’re publishing libraries that need to be used by non-Ivy projects.

Also happens with TemplateRef, I’m using it as a type: @ViewChild('my-template') myTemplate: TemplateRef<any>

And when compiling it says: 'TemplateRef' is imported from external module '@angular/core' but never used

Same thing happens to me. I am using TemplateRef to reference to a modal

  // reference to the text area modal
  @ViewChild('textAreaDialog') textAreaDialog: TemplateRef<any>;

I get similar problem like this when using ElementRef.

I tried using tslint:disable and that did not help.

This warning message logged 2x to console is 'ElementRef' is imported from external module '@angular/core' but never used. See full console output from build:

[0] File change detected. Starting incremental compilation...
[0] Building entry point '@dynatron/framework'
[0] Compiling TypeScript sources through ngc
[0] Bundling to FESM2015
[0] 'ElementRef' is imported from external module '@angular/core' but never used
[0] Bundling to FESM5
[0] 'ElementRef' is imported from external module '@angular/core' but never used
[0] Bundling to UMD
[0] Minifying UMD bundle
[0] Copying declaration files
[0] Writing package metadata
[0] Removing scripts section in package.json as it's considered a potential security vulnerability.
[0] Built @dynatron/framework
[0] Built Angular Package!
[0]  - from: d:\Dynatron\code\framework\framework
[0]  - to:   d:\Dynatron\code\framework\dist\framework
[0]
[0] Compilation complete. Watching for file changes...

Here is my component that makes compile warning.

/// <reference types="@types/googlemaps" />

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
// tslint:disable-next-line:no-unused-variable
import { ElementRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'dyna-location-finder',
  templateUrl: './location-finder.component.html',
  styleUrls: ['./location-finder.component.scss']
})
export class LocationFinderComponent implements OnInit {
  private window: Window;
  // tslint:disable-next-line:no-unused-variable
  @ViewChild('gmap') gmapElement: ElementRef;

  constructor(@Inject('Window') _window: any) {
    // https://github.com/angular/angular/issues/20351#issuecomment-446025223
    this.window = _window;
  }

  ngOnInit(): void {
    this.window.navigator.geolocation.getCurrentPosition((location: Position) => 
        this.updateMap(location.coords));
  }

  private updateMap(coords: Coordinates) {
    if (coords) {
      const position = new google.maps.LatLng(coords.latitude, coords.longitude);
      const mapProp = {
        center: position,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        fullscreenControl: false
      };
      const map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
      new google.maps.Marker({
        position: position,
        map: map,
        title: "You are here",
        label: "You are here",
      });
    }
  }
}

The gmapElement: ElementRef is just a reference to a div in the html markup who looks like this <div class="map" #gmap></div>

Clearly ElementRef is used, it is the type of a class member. And the class member is used in the line const map = new google.maps.Map(this.gmapElement.nativeElement, mapProp); so there is no reason compiler should warn about this. Even more baffling the tslint flag is ignored.

Incidentally, warnings disappeared when I upgraded to Angular 10 (along with all other JS deps).

I was going to implement @Semigradsky solution when I noticed that Angular 10 was just released. So I started by upgrading everything. And without any change in my own code, warnings disappeared. I did not investigate further to find out exactly which package upgrade solved this, but if you are in a position to upgrade Angular, you might want to try that first.

@PowerKiKi You are correct, I was not able to reproduce this with latest Angular either. Closing this issue, thanks!