Build Optimizer too aggressive, breaking some of our application code

[josephliccini]

Versions

1.5.0 (ejected configuration)

Repro steps

1. Include in module.rules:

                {
                    test: /(\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                    use: [
                        {
                            loader: '@angular-devkit/build-optimizer/webpack-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        '@ngtools/webpack'
                    ]
                },

Step 2: Write code in a method for a component like this:

private instrumentCreateMenuImpression() {
        const params: InstrumentationParams = {};
        params[InstrumentationParam.ItemCount] = this.items ? this.items.length.toString() : '0';
        params[InstrumentationParam.RenderSize] = this.createLinks ? this.createLinks.length.toString() : '0';
        params[InstrumentationParam.Distribution] = this.createLinks
            ? this.createLinks.map(link => link.workload.Id).reduce((prevVal, currVal, index) => prevVal + (index === 0 ? '' : ';') + currVal, '')
            : '';

        const metrics = [
            KnownInstrumentationEvents.CreateMenuImpression,
            `${KnownInstrumentationEvents.CreateMenuImpression}.${this.createLinks.length}`
        ];
        this.instrumentationService.generateImpressionEvent(KnownInstrumentationEvents.CreateMenuImpression, null, params, metrics).record();
}

Step 3: Observe build optimizer output:

CreateMenuComponent.prototype.instrumentCreateMenuImpression = function () {
    var params = /*@__PURE__*/ (function () {
            var params = {};
            params[instrumentation_service["a" /* InstrumentationParam */].ItemCount] = this.items ? this.items.length.toString() : '0';
            params[instrumentation_service["a" /* InstrumentationParam */].RenderSize] = this.createLinks ? this.createLinks.length.toString() : '0';
            params[instrumentation_service["a" /* InstrumentationParam */].Distribution] = this.createLinks
                ? this.createLinks.map(function (link) { return link.workload.Id; }).reduce(function (prevVal, currVal, index) { return prevVal + (index === 0 ? '' : ';') + currVal; }, '')
                : '';
            return params;
        })();
        var metrics = [
            instrumentation_service["e" /* KnownInstrumentationEvents */].CreateMenuImpression,
            instrumentation_service["e" /* KnownInstrumentationEvents */].CreateMenuImpression + "." + this.createLinks.length
        ];
        this.instrumentationService.generateImpressionEvent(instrumentation_service["e" /* KnownInstrumentationEvents */].CreateMenuImpression, null, params, metrics).record();
}

Observed behavior

An exception is thrown: 'Cannot read propery 'items' of undefined'

Desired behavior

Why is params changing structure? I would expect the params object to remain an object.

Mention any other details that might be useful (optional)

Angular 5.0.1
Webpack 3.8.1
TypeScript 2.4.2

[josephliccini]

Workaround for now is to just have use: '@ngtools/webpack'

[clydin]

Your code unfortunately looks like an ES5 down level tsickle enum which is why it transformed the code with the IIFE wrapper. The selection criteria will need to be investigated and hopefully made more strict to avoid this scenario.

[josephliccini]

Not sure if this would be helpful at all, but there are 2 types here: InstrumentationParams and InstrumentationParam (note the s)

export type InstrumentationParams = { [param: number]: string };

export enum InstrumentationParam {
    ItemCount,
    RenderSize,
    Distribution,
    // ...
}

[hansl]

This seems like an aggressive purify change. Definitely something we should look at.

[josephliccini]

thanks everyone for a quick fix! Happy holidays 🎄⛄️

…

Sent from my iPhone

On Dec 20, 2017, at 2:40 PM, Hans ***@***.***> wrote: Closed #8536 via angular/devkit#342. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.