Angular Component代码和编译后生成的JavaScript代码

Component源代码：

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "app-root",
    /*template: `
      <input [(ngModel)] = "jerry">
    `*/
    template: `
    <div>Hello</div>
    `
  })
  export class AppComponent implements OnInit{
    ngOnInit(): void {
        debugger;
    }

  }

编译之后生成的JavaScript代码：

/***/ "5El0":
/*!****************************************************************************************************************!*\
  !*** C:/Code/SPA/spartacus/feature-libs/organization/administration/components/cost-center/jerry.component.ts ***!
  \****************************************************************************************************************/
/*! exports provided: AppComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AppComponent", function() { return AppComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "EM62");


class AppComponent {
    ngOnInit() {
        debugger;
    }
}
AppComponent.ɵfac = function AppComponent_Factory(t) { return new (t || AppComponent)(); };
AppComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: AppComponent, selectors: [["app-root"]], decls: 2, vars: 0, template: function AppComponent_Template(rf, ctx) { if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1, "Hello");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    } }, encapsulation: 2 });
/*@__PURE__*/ (function () { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵsetClassMetadata"](AppComponent, [{
        type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"],
        args: [{
                selector: "app-root",
                /*template: `
                  <input [(ngModel)] = "jerry">
                `*/
                template: `
    <div>Hello</div>
    `
            }]
    }], null, null); })();


/***/ }),

有一个对module id为EM62的依赖：

Angular Component的模板文件，编译成了：ɵɵelementStart，ɵɵtext和ɵɵelementEnd：

Component的元数据，连源文件里的注释都还在：

该app component编译之后的JavaScript代码，我是在这个文件里找到的：
http://localhost:4200/spartacus-organization-administration.js

原因：costCenterCmsConfig里包含了AppComponent，而costCenterCmsConfig被CostCenterComponentsModule引用。

上述编译之后生成的JavaScript代码，在main.js里可以查看：

就连index.ts都有单元测试文件，很好很强大!

更多Jerry的原创文章，尽在：“汪子熙”: