Solvedangular Unused import is created when compiling with NGC

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Angular Compiler is not stripping out unused inputs for classes that are used solely for type definitions.

import { Component, Input } from "@angular/core";
import { FormControl } from "@angular/forms";

@Component({
   template: ``
})
export class MainComponent  {
  @Input() form: FormControl;
} 

In the output file generated by NGC there is an unused import that is used only for types within the component https://github.com/alan-agius4/angular-ngc-unused-imports/blob/master/ngc-out/main.component.js#L2

import { Component, Input } from "@angular/core";
import { FormControl } from "@angular/forms"; // this is unused
export class MainComponent {
}
MainComponent.decorators = [
    { type: Component, args: [{
                template: ``
            },] },
];
/** @nocollapse */
MainComponent.ctorParameters = () => [];
MainComponent.propDecorators = {
    "form": [{ type: Input },],
};

When using TSC there is no unused import https://github.com/alan-agius4/angular-ngc-unused-imports/blob/master/tsc-out/main.component.js

import * as tslib_1 from "tslib";
import { Component, Input } from "@angular/core";
let MainComponent = class MainComponent {
};
tslib_1.__decorate([
    Input()
], MainComponent.prototype, "form", void 0);
MainComponent = tslib_1.__decorate([
    Component({
        template: ``
    })
], MainComponent);
export { MainComponent };

Expected behavior

The import statement is dropped.

Minimal reproduction of the problem with instructions

https://github.com/alan-agius4/angular-ngc-unused-imports

What is the motivation / use case for changing the behavior?

No unused import is created, As when I generate my library and using rollup to create FESM, this will create an import to the whole dependency example;

import { FormControl } from "@angular/forms";

will be transformed to

import "@angular/forms";

and like this there will be no treeshaking and the bundle size will eventually increase a lot

Environment

Angular version: 5.1.2
TypeScript version: 2.5.3

Other details:
microsoft/TypeScript#17552

15 Answers

✔️Accepted Answer

@alan-agius4, I have an Angular library (with latest dependencies), that I build with ivy disabled (for npm publishing). The default @angular-devkit/build-ng-packagr:build builder is used.

And when ngc is bundling the project to FESM2015 and FESM5, the warnings appear:

Bundling to FESM2015
WARNING: 'AfterViewInit', 'OnChanges', 'OnInit', 'SimpleChanges', 'HostListener', 'OnDestroy' and 'EmbeddedViewRef' are imported from external module '@angular/core' but never used
WARNING: 'SafeStyle', 'SafeResourceUrl' and 'SafeUrl' are imported from external module '@angular/platform-browser' but never used
...

More Issues: