SourceMap position not found for trace: AssertionError (Karma-Typescript)

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.

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