Question

我已经创建了一个简单的Angular库“ test-pub”（使用nx g @nrwl/angular:lib test-pub --publishable）。然后，我添加了一个非常基本的组件。

super.component.html：

<p>super works!</p>

super.component.ts：

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

@Component({
  selector: 'my-super',
  templateUrl: './super.component.html'
})
export class SuperComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

在我的tsconfig.json中添加了以下内容（请注意，enableResourceInlining设置为true：

"angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  }

最后，我已经为此库运行ng build：ng run test-pub:build

然后，我查看了该库的生成代码，并发现了以下内容：

import { ɵɵdefineComponent, ɵɵelementStart, ɵɵtext, ɵɵelementEnd, ɵsetClassMetadata, Component, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

var SuperComponent = /** @class */ (function () {
    function SuperComponent() {
    }
    SuperComponent.prototype.ngOnInit = function () {
    };
    SuperComponent.ɵfac = function SuperComponent_Factory(t) { return new (t || SuperComponent)(); };
    SuperComponent.ɵcmp = ɵɵdefineComponent({ type: SuperComponent, selectors: [["rd-super"]], decls: 2, vars: 0, template: function SuperComponent_Template(rf, ctx) { if (rf & 1) {
            ɵɵelementStart(0, "p");
            ɵɵtext(1, "super works!");
            ɵɵelementEnd();
        } }, styles: [""] });
    return SuperComponent;
}());
/*@__PURE__*/ (function () { ɵsetClassMetadata(SuperComponent, [{
        type: Component,
        args: [{
                selector: 'rd-super',
                templateUrl: './super.component.html',
                styleUrls: ['./super.component.less']
            }]
    }], function () { return []; }, null); })();

var TestPubModule = /** @class */ (function () {
    function TestPubModule() {
    }
    TestPubModule.ɵmod = ɵɵdefineNgModule({ type: TestPubModule });
    TestPubModule.ɵinj = ɵɵdefineInjector({ factory: function TestPubModule_Factory(t) { return new (t || TestPubModule)(); }, imports: [[CommonModule]] });
    return TestPubModule;
}());
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(TestPubModule, { declarations: [SuperComponent], imports: [CommonModule], exports: [SuperComponent] }); })();
/*@__PURE__*/ (function () { ɵsetClassMetadata(TestPubModule, [{
        type: NgModule,
        args: [{
                imports: [CommonModule],
                declarations: [SuperComponent],
                exports: [SuperComponent]
            }]
    }], null, null); })();

/**
 * Generated bundle index. Do not edit.
 */

export { SuperComponent, TestPubModule };
//# sourceMappingURL=rd-test-pub.js.map

请注意以下事实：生成的JS文件在templateUrl中仍然包含ɵsetClassMetadata(SuperComponent ....。此外，当我尝试在JIT Angular应用程序中使用该库时，它引发了错误 404：super.component.html 。这意味着我的应用程序正在尝试查找资产，没有使用内联模板！

在研究过程中，我遇到了以下问题：https://github.com/angular/angular/issues/30174 @alxhub在其中解释说，实际上enableResourceInlining现在已被忽略，并且基本上资源总是与Ivy内联。我在这里有两个问题：

为什么在我的示例中编译的Ivy代码仍然使用templateUrl，为什么我的JIT Angular应用程序仍尝试单独查找HTML资源
现在，我们可以使用enableIvy: false轻松解决此问题。但是当旧的ViewEngine将被丢弃而我们将不得不使用Ivy时该怎么办？

库中断中的角形常春藤enableResourceInlining

0 个答案: