Why when compile angular library with --emitDecoratorMetadata flag i get warnings?

Question

warnings like

WARNING: "FormControl" and "FormBuilder" are imported from external module "@angular/forms" but never used in **\esm2015\lib\**
WARNING: "Router" is imported from external module "@angular/router" but never used in **\esm2015\lib\**
WARNING: "NgZone", "ComponentFactoryResolver", "ViewContainerRef" and "Renderer2" are imported from external module "@angular/core" but never used in **\esm2015\lib\**

on Bundling to FESM2015 step

angular version 12.2.13

tsconfig

{
    "compileOnSave": false,
    "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "module": "es2020",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "importHelpers": true,
        "target": "es2017",
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2020", "dom"]
    },
    "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true,
    }
}

tsconfig.lib.json

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "baseUrl": "./src",
        "outDir": "../../out-tsc/lib"
    },
    "files": [
        "./src/public-api.ts"
    ]
}

for build lib use "builder": "@angular-devkit/build-angular:ng-packagr",

Answer 1

You should remove/disable emitDecoratorMetadata for your angular library. In your library's tsconfig.json, set:

{
  "compilerOptions": {
    .
    .
    .
    "emitDecoratorMetadata": false
  }
}

https://github.com/angular/angular/issues/21280#issuecomment-635538723

I believe this should be fine and the best route for Angular 12+ as Angular's schematic actually removes emitDecoratorMetadata now, as it's no longer needed. https://github.com/angular/angular-cli/commit/96a4467ce90fb6b88f5be39f73c8fd64ce057a4a https://blog.ninja-squad.com/2021/05/12/angular-cli-12.0/

---

Another option is to separate `Type` imports using a separate import statement, but I consider duplicate import from the same library as a bad practice. https://github.com/ng-packagr/ng-packagr/issues/1543#issuecomment-593873874

An improvement would be to use import type instead 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'
... 

https://github.com/ng-packagr/ng-packagr/issues/710#issuecomment-651139519

HOWEVER this will fail for constructor injects:

Consider changing the type-only import to a regular import, or use the @Inject decorator to specify an injection token.

10   constructor(private readonly toastr: ToastrService, private readonly _location: Location) {}
                                                                          ~~~~~~~~~