Warnings of unused imports when packaging libs

Question

I am working on an Nx powered monorepo, building a bunch of libs written in angular and packaged with ng-packagr.

When building the sources I am seeing a bunch of warnings like this:

WARNING: "DomSanitizer" is imported from external module "@angular/platform-browser" but never used in "xxx.js".

Example file:

Typescript source:

import { Injectable } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Injectable()
export class SomeService {

    constructor( public sanitizer:DomSanitizer) {
    }
}

Generated JS:

import { Injectable } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; // warning about this not being used
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";

export class SomeService {
    constructor(sanitizer) {
        this.sanitizer = sanitizer;
    }
}
SomeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SomeService, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable });
SomeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SomeService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SomeService, decorators: [{
            type: Injectable
        }], ctorParameters: function () { return [ { type: i1.DomSanitizer }]; } });

indeed I can see the DomSanitizer import is not being used, but the tokenized i1.DomSanitizer is

Tsconfigs as follows..

tsconfig.lib.prod.json

{
  "extends": "./tsconfig.lib.json",
  "compilerOptions": {
    "declarationMap": false
  },
  "angularCompilerOptions": {
    "compilationMode": "partial"
  }
}

tsconfig.lib.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "target": "es2015",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": [],
    "lib": ["dom", "es2018"]
  },
  "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
  "include": ["**/*.ts"]
}

How do I get rid of these warnings? Is there something misconfigured with how the libs are building and causing these duplicate\redundant imports?

Thanks

UPDATE

As per https://github.com/ng-packagr/ng-packagr/issues/2269, there doesn't seem to be a way to suppress these warnings.

We are using angular\nx 12 libs and therefore the ng-packagr 12 version is also being used.

So until we upgrade to 13, these warnings will not go away.

Will leave this here in case it's of use to anyone, or if anyone does find a way with v12 and can provide a workaround.

Jinni

Answer 1

Because you are importing this only to use it as a type for your constructor:

import { DomSanitizer } from '@angular/platform-browser';

You can use the new(ish) import type syntax:

import type { DomSanitizer } from '@angular/platform-browser';

Or even

import { type DomSanitizer, RegularImportThing } from '@angular/platform-browser';

if you have other imports from that module.

Type imports will be erased at build time because they have no effect on the runtime of the code. That means the generated JavaScript shouldn't have the "useless" import and thus never emit a warning.

This was added in TypeScript 3.8

Husking

Nice answer, I shall give this a try soon – Jinni

so actually, I am using the import as a regular import as I call methods on it in other functions in the code. – Jinni

Answer 2

import { DomSanitizer } from '@angular/platform-browser'; // warning about this not

You are importing DomSanitizer but in the TS file you showed no element using sanitizer

if you are using it in your script update your question, if you are using it in that specific component remove it, also its best behavior to import using private like private sanitizer:DomSanitizer

Nalor

None of that makes a difference to my original question – Jinni