1

I am updating my Angular project from version 8.2 to version 10.2 using the Angular guide (https://update.angular.io/?v=8.2-10.2). When I serve the application locally (ng serve) it works correctly, but if I do it with the staging configuration there is part of the application that doesn't work properly. The configuration I use for staging is the following one (inside angular.json):

        "staging": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.staging.ts"
            }
          ]
       }

If I change the value of buildOptimizer into true the application doesn't work correctly, because the following component does not render:

 <lib-widget [config]="widgetConfig" [isDetailView]="true" ></lib-widget>

No error is shown in the console and everything seems to work ok, but it simply does not render. If I set that value to false (understanding that it doesn't optimize the code) my application works as expected.

The build finishes without errors too with both configurations.

When using the faulty configuration the lib-widget component is loaded and it even renders in some places of the app, but with the exact call shown above it does not work using the buildOptimizer. Below you can see part of the code of this component, I’ve put log statements in the constructor and in the ngOnInit method, but they do not even get called:

@Component({
  selector: 'lib-widget',
  templateUrl: './widget.component.html',
  styleUrls: ['./widget.component.css'],
  changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.None
})

export class WidgetComponent implements OnInit, OnChanges {
  @Input() config: WidgetConfig;
  @Input() fullscreen = false; 
  @Input() isClone = false; 
  @Input() container = false; 
  @Input() embedded = false; 
  @Input() categories ? : WidgetCategory[] = []; 
  @Input() inputIsBlocked = false; 
  @Input() isDetailView = false; 
  @Output() outConfig = new EventEmitter < WidgetConfig > (); 

  widgetConfig: WidgetConfig = new WidgetConfig();
  component: any;
  firstLoad = true;
  inputs = {};
  outputs = {
    outConfig: () => { 
      this.widgetConfig = this.config;
      this.saveWidgetConfig();
    }
  };

  constructor(
    @Inject('widgetSettings') public widgetSettings: WidgetSettings,
    private _ref: ChangeDetectorRef,
    private _widgetService: WidgetService,
    private _widgetConfigService: WidgetConfigService,
    private _widgetDialog: MatDialog) {
    console.log('in constructor'); // this is never being called with buildOptimizer=true
  }

  ngOnInit() {
    console.log('in ngOnInit'); // this is never being called with buildOptimizer=true
    this._loadIfNecessary();
  }

  // Rest of code
  // ...
}

I’ve looked for possible solutions in SO (like this one), but none of them worked for me. Any idea? Should I simply put buildOptimizer=false for the production build?

I hope you can help me, Thanks in advance

joanlofe
  • 3,360
  • 2
  • 26
  • 44
jm2020
  • 11
  • 1
  • your `widgetSettings` is an interface? if yes, take a look to this discuss https://github.com/angular/angular/issues/12631 – Eliseo Nov 25 '20 at 08:55

0 Answers0