Decorators are not removed when using NGC in Bazel

🐞 bug report

Affected Package

The issue is caused by package @angular/bazel

Is this a regression?

No clue.

Description

NGC is supposed to remove Angular related decorators from the generated code (at least in non es5Mode)

hello-world.component.mjs

// This is supposed to be removed
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/**
 * @fileoverview added by tsickle
 * Generated from: src/app/hello-world/hello-world.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component } from '@angular/core';
import { shorten } from '@lib/shorten';
import { format } from 'date-fns';
let HelloWorldComponent = class HelloWorldComponent {
    constructor() {
        this.name = shorten('Adolph Blaine Wolfeschlegelsteinhausenbergerdorff, Senior ', 15);
        this.date = format(new Date(), 'mmmm d, yyyy');
    }
};
// And the decorators as well
HelloWorldComponent = __decorate([
    Component({
        selector: 'hello-world',
        template: "<h1>Home</h1>\n\n<mat-card>\n  <mat-card-title>\n    <div id=\"greeting\">Hello {{ name }}</div>\n  </mat-card-title>\n\n  <mat-card-content>\n    <mat-form-field><input matInput [(ngModel)]=\"name\"/></mat-form-field>\n    <p>Today is {{ date }}</p>\n  </mat-card-content>\n\n  <mat-card-footer>\n    <div class=\"mood-icon\"><mat-icon>mood</mat-icon></div>\n  </mat-card-footer>\n</mat-card>\n\n",
        styles: [".mood-icon{margin:1rem}/*# sourceMappingURL=hello-world.component.css.map */\n"]
    })
], HelloWorldComponent);
export { HelloWorldComponent };
if (false) {
    /** @type {?} */
    HelloWorldComponent.prototype.name;
    /** @type {?} */
    HelloWorldComponent.prototype.date;
}

hello-world.component.ngfactory.mjs

/**
 * @fileoverview This file was generated by the Angular template compiler. Do not edit.
 *
 * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes}
 * tslint:disable
 */ 
import * as i0 from "examples_angular_view_engine/src/app/hello-world/hello-world.component.css.shim.ngstyle";
import * as i1 from "@angular/core";
import * as i2 from "@angular/material/card/typings/index.ngfactory";
import * as i3 from "@angular/material/card";
import * as i4 from "@angular/platform-browser/animations";
import * as i5 from "@angular/material/form-field/typings/index.ngfactory";
import * as i6 from "@angular/material/form-field";
import * as i7 from "@angular/material/core";
import * as i8 from "@angular/cdk/bidi";
import * as i9 from "@angular/cdk/platform";
import * as i10 from "@angular/forms";
import * as i11 from "@angular/material/input";
import * as i12 from "@angular/cdk/text-field";
import * as i13 from "@angular/material/icon/typings/index.ngfactory";
import * as i14 from "@angular/material/icon";
import * as i15 from "examples_angular_view_engine/src/app/hello-world/hello-world.component";
var styles_HelloWorldComponent = [i0.styles];
var RenderType_HelloWorldComponent = i1.ɵcrt({ encapsulation: 0, styles: styles_HelloWorldComponent, data: {} });
export { RenderType_HelloWorldComponent as RenderType_HelloWorldComponent };
export function View_HelloWorldComponent_0(_l) { return i1.ɵvid(0, [(_l()(), i1.ɵeld(0, 0, null, null, 1, "h1", [], null, null, null, null, null)), (_l()(), i1.ɵted(-1, null, ["Home"])), (_l()(), i1.ɵeld(2, 0, null, null, 34, "mat-card", [["class", "mat-card"]], [[2, "_mat-animation-noopable", null]], null, null, i2.View_MatCard_0, i2.RenderType_MatCard)), i1.ɵdid(3, 49152, null, 0, i3.MatCard, [[2, i4.ANIMATION_MODULE_TYPE]], null, null), (_l()(), i1.ɵeld(4, 0, null, 0, 3, "mat-card-title", [["class", "mat-card-title"]], null, null, null, null, null)), i1.ɵdid(5, 16384, null, 0, i3.MatCardTitle, [], null, null), (_l()(), i1.ɵeld(6, 0, null, null, 1, "div", [["id", "greeting"]], null, null, null, null, null)), (_l()(), i1.ɵted(7, null, ["Hello ", ""])), (_l()(), i1.ɵeld(8, 0, null, 0, 22, "mat-card-content", [["class", "mat-card-content"]], null, null, null, null, null)), i1.ɵdid(9, 16384, null, 0, i3.MatCardContent, [], null, null), (_l()(), i1.ɵeld(10, 0, null, null, 18, "mat-form-field", [["class", "mat-form-field"]], [[2, "mat-form-field-appearance-standard", null], [2, "mat-form-field-appearance-fill", null], [2, "mat-form-field-appearance-outline", null], [2, "mat-form-field-appearance-legacy", null], [2, "mat-form-field-invalid", null], [2, "mat-form-field-can-float", null], [2, "mat-form-field-should-float", null], [2, "mat-form-field-has-label", null], [2, "mat-form-field-hide-placeholder", null], [2, "mat-form-field-disabled", null], [2, "mat-form-field-autofilled", null], [2, "mat-focused", null], [2, "mat-accent", null], [2, "mat-warn", null], [2, "ng-untouched", null], [2, "ng-touched", null], [2, "ng-pristine", null], [2, "ng-dirty", null], [2, "ng-valid", null], [2, "ng-invalid", null], [2, "ng-pending", null], [2, "_mat-animation-noopable", null]], null, null, i5.View_MatFormField_0, i5.RenderType_MatFormField)), i1.ɵdid(11, 7520256, null, 9, i6.MatFormField, [i1.ElementRef, i1.ChangeDetectorRef, [2, i7.MAT_LABEL_GLOBAL_OPTIONS], [2, i8.Directionality], [2, i6.MAT_FORM_FIELD_DEFAULT_OPTIONS], i9.Platform, i1.NgZone, [2, i4.ANIMATION_MODULE_TYPE]], null, null), i1.ɵqud(603979776, 1, { _controlNonStatic: 0 }), i1.ɵqud(335544320, 2, { _controlStatic: 0 }), i1.ɵqud(603979776, 3, { _labelChildNonStatic: 0 }), i1.ɵqud(335544320, 4, { _labelChildStatic: 0 }), i1.ɵqud(603979776, 5, { _placeholderChild: 0 }), i1.ɵqud(603979776, 6, { _errorChildren: 1 }), i1.ɵqud(603979776, 7, { _hintChildren: 1 }), i1.ɵqud(603979776, 8, { _prefixChildren: 1 }), i1.ɵqud(603979776, 9, { _suffixChildren: 1 }), (_l()(), i1.ɵeld(21, 0, null, 1, 7, "input", [["class", "mat-input-element mat-form-field-autofill-control"], ["matInput", ""]], [[2, "ng-untouched", null], [2, "ng-touched", null], [2, "ng-pristine", null], [2, "ng-dirty", null], [2, "ng-valid", null], [2, "ng-invalid", null], [2, "ng-pending", null], [2, "mat-input-server", null], [1, "id", 0], [1, "placeholder", 0], [8, "disabled", 0], [8, "required", 0], [1, "readonly", 0], [1, "aria-describedby", 0], [1, "aria-invalid", 0], [1, "aria-required", 0]], [[null, "ngModelChange"], [null, "input"], [null, "blur"], [null, "compositionstart"], [null, "compositionend"], [null, "focus"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("input" === en)) {
        var pd_0 = (i1.ɵnov(_v, 22)._handleInput($event.target.value) !== false);
        ad = (pd_0 && ad);
    } if (("blur" === en)) {
        var pd_1 = (i1.ɵnov(_v, 22).onTouched() !== false);
        ad = (pd_1 && ad);
    } if (("compositionstart" === en)) {
        var pd_2 = (i1.ɵnov(_v, 22)._compositionStart() !== false);
        ad = (pd_2 && ad);
    } if (("compositionend" === en)) {
        var pd_3 = (i1.ɵnov(_v, 22)._compositionEnd($event.target.value) !== false);
        ad = (pd_3 && ad);
    } if (("blur" === en)) {
        var pd_4 = (i1.ɵnov(_v, 27)._focusChanged(false) !== false);
        ad = (pd_4 && ad);
    } if (("focus" === en)) {
        var pd_5 = (i1.ɵnov(_v, 27)._focusChanged(true) !== false);
        ad = (pd_5 && ad);
    } if (("input" === en)) {
        var pd_6 = (i1.ɵnov(_v, 27)._onInput() !== false);
        ad = (pd_6 && ad);
    } if (("ngModelChange" === en)) {
        var pd_7 = ((_co.name = $event) !== false);
        ad = (pd_7 && ad);
    } return ad; }, null, null)), i1.ɵdid(22, 16384, null, 0, i10.DefaultValueAccessor, [i1.Renderer2, i1.ElementRef, [2, i10.COMPOSITION_BUFFER_MODE]], null, null), i1.ɵprd(1024, null, i10.NG_VALUE_ACCESSOR, function (p0_0) { return [p0_0]; }, [i10.DefaultValueAccessor]), i1.ɵdid(24, 671744, null, 0, i10.NgModel, [[8, null], [8, null], [8, null], [6, i10.NG_VALUE_ACCESSOR]], { model: [0, "model"] }, { update: "ngModelChange" }), i1.ɵprd(2048, null, i10.NgControl, null, [i10.NgModel]), i1.ɵdid(26, 16384, null, 0, i10.NgControlStatus, [[4, i10.NgControl]], null, null), i1.ɵdid(27, 999424, null, 0, i11.MatInput, [i1.ElementRef, i9.Platform, [6, i10.NgControl], [2, i10.NgForm], [2, i10.FormGroupDirective], i7.ErrorStateMatcher, [8, null], i12.AutofillMonitor, i1.NgZone], null, null), i1.ɵprd(2048, [[1, 4], [2, 4]], i6.MatFormFieldControl, null, [i11.MatInput]), (_l()(), i1.ɵeld(29, 0, null, null, 1, "p", [], null, null, null, null, null)), (_l()(), i1.ɵted(30, null, ["Today is ", ""])), (_l()(), i1.ɵeld(31, 0, null, 1, 5, "mat-card-footer", [["class", "mat-card-footer"]], null, null, null, null, null)), i1.ɵdid(32, 16384, null, 0, i3.MatCardFooter, [], null, null), (_l()(), i1.ɵeld(33, 0, null, null, 3, "div", [["class", "mood-icon"]], null, null, null, null, null)), (_l()(), i1.ɵeld(34, 0, null, null, 2, "mat-icon", [["class", "mat-icon notranslate"], ["role", "img"]], [[2, "mat-icon-inline", null], [2, "mat-icon-no-color", null]], null, null, i13.View_MatIcon_0, i13.RenderType_MatIcon)), i1.ɵdid(35, 9158656, null, 0, i14.MatIcon, [i1.ElementRef, i14.MatIconRegistry, [8, null], [2, i14.MAT_ICON_LOCATION], [2, i1.ErrorHandler]], null, null), (_l()(), i1.ɵted(-1, 0, ["mood"]))], function (_ck, _v) { var _co = _v.component; var currVal_40 = _co.name; _ck(_v, 24, 0, currVal_40); _ck(_v, 27, 0); _ck(_v, 35, 0); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = (i1.ɵnov(_v, 3)._animationMode === "NoopAnimations"); _ck(_v, 2, 0, currVal_0); var currVal_1 = _co.name; _ck(_v, 7, 0, currVal_1); var currVal_2 = (i1.ɵnov(_v, 11).appearance == "standard"); var currVal_3 = (i1.ɵnov(_v, 11).appearance == "fill"); var currVal_4 = (i1.ɵnov(_v, 11).appearance == "outline"); var currVal_5 = (i1.ɵnov(_v, 11).appearance == "legacy"); var currVal_6 = i1.ɵnov(_v, 11)._control.errorState; var currVal_7 = i1.ɵnov(_v, 11)._canLabelFloat; var currVal_8 = i1.ɵnov(_v, 11)._shouldLabelFloat(); var currVal_9 = i1.ɵnov(_v, 11)._hasFloatingLabel(); var currVal_10 = i1.ɵnov(_v, 11)._hideControlPlaceholder(); var currVal_11 = i1.ɵnov(_v, 11)._control.disabled; var currVal_12 = i1.ɵnov(_v, 11)._control.autofilled; var currVal_13 = i1.ɵnov(_v, 11)._control.focused; var currVal_14 = (i1.ɵnov(_v, 11).color == "accent"); var currVal_15 = (i1.ɵnov(_v, 11).color == "warn"); var currVal_16 = i1.ɵnov(_v, 11)._shouldForward("untouched"); var currVal_17 = i1.ɵnov(_v, 11)._shouldForward("touched"); var currVal_18 = i1.ɵnov(_v, 11)._shouldForward("pristine"); var currVal_19 = i1.ɵnov(_v, 11)._shouldForward("dirty"); var currVal_20 = i1.ɵnov(_v, 11)._shouldForward("valid"); var currVal_21 = i1.ɵnov(_v, 11)._shouldForward("invalid"); var currVal_22 = i1.ɵnov(_v, 11)._shouldForward("pending"); var currVal_23 = !i1.ɵnov(_v, 11)._animationsEnabled; _ck(_v, 10, 1, [currVal_2, currVal_3, currVal_4, currVal_5, currVal_6, currVal_7, currVal_8, currVal_9, currVal_10, currVal_11, currVal_12, currVal_13, currVal_14, currVal_15, currVal_16, currVal_17, currVal_18, currVal_19, currVal_20, currVal_21, currVal_22, currVal_23]); var currVal_24 = i1.ɵnov(_v, 26).ngClassUntouched; var currVal_25 = i1.ɵnov(_v, 26).ngClassTouched; var currVal_26 = i1.ɵnov(_v, 26).ngClassPristine; var currVal_27 = i1.ɵnov(_v, 26).ngClassDirty; var currVal_28 = i1.ɵnov(_v, 26).ngClassValid; var currVal_29 = i1.ɵnov(_v, 26).ngClassInvalid; var currVal_30 = i1.ɵnov(_v, 26).ngClassPending; var currVal_31 = i1.ɵnov(_v, 27)._isServer; var currVal_32 = i1.ɵnov(_v, 27).id; var currVal_33 = i1.ɵnov(_v, 27).placeholder; var currVal_34 = i1.ɵnov(_v, 27).disabled; var currVal_35 = i1.ɵnov(_v, 27).required; var currVal_36 = ((i1.ɵnov(_v, 27).readonly && !i1.ɵnov(_v, 27)._isNativeSelect) || null); var currVal_37 = (i1.ɵnov(_v, 27)._ariaDescribedby || null); var currVal_38 = i1.ɵnov(_v, 27).errorState; var currVal_39 = i1.ɵnov(_v, 27).required.toString(); _ck(_v, 21, 1, [currVal_24, currVal_25, currVal_26, currVal_27, currVal_28, currVal_29, currVal_30, currVal_31, currVal_32, currVal_33, currVal_34, currVal_35, currVal_36, currVal_37, currVal_38, currVal_39]); var currVal_41 = _co.date; _ck(_v, 30, 0, currVal_41); var currVal_42 = i1.ɵnov(_v, 35).inline; var currVal_43 = (((i1.ɵnov(_v, 35).color !== "primary") && (i1.ɵnov(_v, 35).color !== "accent")) && (i1.ɵnov(_v, 35).color !== "warn")); _ck(_v, 34, 0, currVal_42, currVal_43); }); }
export function View_HelloWorldComponent_Host_0(_l) { return i1.ɵvid(0, [(_l()(), i1.ɵeld(0, 0, null, null, 1, "hello-world", [], null, null, null, View_HelloWorldComponent_0, RenderType_HelloWorldComponent)), i1.ɵdid(1, 49152, null, 0, i15.HelloWorldComponent, [], null, null)], null, null); }
var HelloWorldComponentNgFactory = i1.ɵccf("hello-world", i15.HelloWorldComponent, View_HelloWorldComponent_Host_0, {}, {}, []);
export { HelloWorldComponentNgFactory as HelloWorldComponentNgFactory };

Since the generated ngfactory code imports the component it becomes a problem, because that means the actual template code will be available to the public.

🔬 Minimal Reproduction

$ git clone https://github.com/bazelbuild/rules_nodejs
$ cd examples/angular_view_engine && yarn
$ yarn bazel build //src/app/hello-world
$ cat dist/bin/src/app/hello-world/hello-world.component.mjs

🌍 Your Environment

Angular Version: I’ve tried with all @angular/bazel-9.0.0-rc.X packages but the result is the same.

[marcus-sa]

@petebacondarwin yeah, this is no longer a problem 👍

[angular-automatic-lock-bot[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.}