Modules imported for side effects are not included in optimized bundle

[amitbeck]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Description

I have a index.ts which imports 2 modules (abstract-control.ts and abstract-control.directive.ts) for side effects, and exports another module (custom-control-status.directive.ts) therefore also acting as a barrel file. custom-control-status.directive.ts is imported through the barrel file (index.ts), therefore I thought index.ts and the 2 modules imported for side effects would be included in the bundle, but they're removed in the tree shaking process.
I tried both of the following:

• specifying "sideEffects" in package.json's:
  1. "sideEffects": ["<path>/index.ts", "<path>/abstract-control.ts" and "<path>/abstract-control.directive.ts"] in the app's package.json
  2. Add a package.json to the directory and set "sideEffects": ["./index.ts", "./abstract-control.ts" and "./abstract-control.directive.ts"] in it
  3. Add a package.json to the directory and set "sideEffects": true in it
• specifying a rule in Webpack's module.rules that matches every TS file in the directory and set sideEffects: true

Despite that, they are all excluded from the bundle. Could this be an issue with Angular's webpack config or @angular-builders/custom-webpack?

🔬 Minimal Reproduction

Reproduction repository: https://github.com/amitbeck/ng-webpack-sideEffects-repro
Either:

1. Run npm run build (alias for ng build --configuration production), or
2. Run npm run serve (alias for ng serve --configuration production) and access through http://localhost:4200. You should get the following error:

   TypeError: this.formGroup.controls.text.setWarnings is not a function

abstract-control.ts, abstract-control.directive.ts and index.ts in src/app/utils/forms/ are not included in the bundle.

🌍 Your Environment

Angular CLI: 13.2.6
Node: 16.13.1
Package Manager: npm 8.1.2
OS: darwin x64

Angular: 13.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker, upgrade

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.1
@angular-devkit/build-angular   13.2.6
@angular-devkit/core            13.3.1
@angular-devkit/schematics      13.2.6
@angular/cdk                    13.2.6
@angular/cdk-experimental       13.2.6
@angular/cli                    13.2.6
@angular/material               13.2.6
@schematics/angular             13.2.6
rxjs                            7.5.5
typescript                      4.5.5

Anything else relevant?

Possibly related to #12912 and webpack/webpack#15610.
Also asked a question in SO and asked a Webpack team member for help in webpack/webpack#15610 (comment).

[amitbeck]

Not sure if this issue is most relevant to Angular CLI or Angular itself, so I also opened angular/angular#46178

[alan-agius4]

Hi @amitbeck,

This seems to be a Webpack issue.

The issue manifest itself when using barrel files. If you import the side-effectful modules without using a barrel file. It workers as expected.

import { CustomControlStatusDirective } from './utils/forms';
import './utils/forms/abstract-control';
import './utils/forms/abstract-control.directive';

Closing as this is not actionable from our end.

[amitbeck]

I see. I've reported this bug in webpack/webpack#15882 and webpack/webpack#15610 (comment).
Thanks for providing a workaround, it indeed works when not importing the side-effectful modules through a barrel file!

[amitbeck]

@alan-agius4 According to a webpack team member, it seems that whatever's in AppModule.declarations isn't emitted to the output code:

so it looks like declarations directive doesn't work as expected in app.module: original code:

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CustomControlStatusDirective } from './utils/forms';

@NgModule({
  declarations: [AppComponent, CustomControlStatusDirective],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

results in non-minimized code

let AppModule = /*#__PURE__*/(() => {
  class AppModule {}

  AppModule.ɵfac = function AppModule_Factory(t) {
    return new (t || AppModule)();
  };

  AppModule.ɵmod = /*@__PURE__*/ɵɵdefineNgModule({
    type: AppModule,
    bootstrap: [AppComponent]
  });
  AppModule.ɵinj = /*@__PURE__*/ɵɵdefineInjector({
    providers: [],
    imports: [[BrowserModule, ReactiveFormsModule]]
  });
  return AppModule;
})();

here there is no CustomControlStatusDirective usage. if just add

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CustomControlStatusDirective } from './utils/forms';

+ console.log(CustomControlStatusDirective);
@NgModule({
  declarations: [AppComponent, CustomControlStatusDirective],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

webpack will bundle all utils/forms

But CustomControlStatusDirective is emitted in app.component.ts's output code:

it looks like somehow CustomControlStatusDirective is used in /src/app/app.component.ts

;// CONCATENATED MODULE: ./src/app/app.component.ts




let AppComponent = /*#__PURE__*/(() => {
  class AppComponent {
    constructor() {
      this.formGroup = new FormGroup({
        text: new FormControl('')
      });
    }

    ngAfterViewInit() {
      window.setTimeout(() => {
        this.formGroup.controls['text'].setWarnings({
          warning: true
        }); // <- TypeError: this.formGroup.controls.text.setWarnings is not a function
      });
    }

  }

  AppComponent.ɵfac = function AppComponent_Factory(t) {
    return new (t || AppComponent)();
  };

  AppComponent.ɵcmp = /*@__PURE__*/ɵɵdefineComponent({
    type: AppComponent,
    selectors: [["app-root"]],
    decls: 2,
    vars: 1,
    consts: [[3, "formGroup"], ["type", "text", "formControlName", "text"]],
    template: function AppComponent_Template(rf, ctx) {
      if (rf & 1) {
        ɵɵelementStart(0, "form", 0);
        ɵɵelement(1, "input", 1);
        ɵɵelementEnd();
      }

      if (rf & 2) {
        ɵɵproperty("formGroup", ctx.formGroup);
      }
    },
    directives: [ɵNgNoValidate, NgControlStatusGroup, FormGroupDirective, DefaultValueAccessor, NgControlStatus, FormControlName, CustomControlStatusDirective],
    styles: [""]
  });
  return AppComponent;
})();

this is some angular magic that fails with side-effects...

How is it possible that CustomControlStatusDirective (or anything in NgModule.declarations) isn't emitted to the output code?

[alan-agius4]

The Angular compiler will remove components which are unused.

See: #21952 (comment) on way to retain such components.

[amitbeck]

@alan-agius4 Thanks for the clarification. It's a bit of magic and voodoo, and definitely not expected 😕

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}