Question

我正在构建一个角度组件库，我们将在各个项目中共享。但是当我构建包时，html文件不会被复制到dist文件夹。我收到错误angular Failed to load text-input.component.html。

这是我的tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "**/*.spec.ts"
  ]
}

这是已编译的组件：

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var abstract_input_component_1 = require("./../abstract-input/abstract-input.component");
var TextInputComponent = /** @class */ (function (_super) {
    __extends(TextInputComponent, _super);
    function TextInputComponent() {
        var _this = _super.call(this) || this;
        _this.type = 'text';
        return _this;
    }
    TextInputComponent.prototype.ngOnInit = function () {
        //
    };
    __decorate([
        core_1.Input(),
        __metadata("design:type", Object)
    ], TextInputComponent.prototype, "type", void 0);
    TextInputComponent = __decorate([
        core_1.Component({
            moduleId: module.id,
            selector: 'hp-text-input',
            templateUrl: './text-input.component.html',
            styleUrls: ['./text-input.component.scss']
        }),
        __metadata("design:paramtypes", [])
    ], TextInputComponent);
    return TextInputComponent;
}(abstract_input_component_1.AbstractInputComponent));
exports.TextInputComponent = TextInputComponent;
//# sourceMappingURL=text-input.component.js.map

这是带有模板url的未编译组件：

import { Component, OnInit, Input } from '@angular/core';
import { AbstractInputComponent } from './../abstract-input/abstract-input.component';

@Component({
  moduleId: module.id,
  selector: 'hp-text-input',
  templateUrl: './text-input.component.html',
  styleUrls: ['./text-input.component.scss']
})
export class TextInputComponent extends AbstractInputComponent implements OnInit {
  @Input() type = 'text';

  constructor() {
    super();
  }

  ngOnInit() {
    //
  }
}

这是编译目录：

这是未编译的目录：

这些是我在package.json中的构建脚本：

  "scripts": {
    "clean": "rm -rf dist/",
    "build": "npm run clean && tsc",
    "install": "npm run build"
  },

我尝试过搜索，但大部分结果都已过时或严重依赖更多依赖项。有什么配置我不见了？

Answer 1

我遇到了与您的问题直接相关的问题：Build Angular module with rollup.js: external html template file won't work (404)。然后here我在这个主题上发现了一个有意义的主题，并且从链接到链接我看到了官方文档Angular Package Format (APF) v5.0，其中包含以下内容：

内嵌模板和样式表
组件库是通常使用存储在其中的样式表和html模板实现单独的文件。虽然不是必需的，但我们建议使用该组件作者将模板和样式表内联到其FESM文件中以及替换stylesheetUrls和的.metadata.json文件带有样式表和模板元数据属性的templateUrl 分别。这简化了组件的消耗应用程序开发人员。

允许您使用外部模板/样式的方式基于构建过程的深度自定义，这应该在编译之前提供外部temlates /样式的人工内联。这些例子可以在GitHub线程上找到（一个人甚至在npm上发布了他的解决方案，每月下载量为1k）。一个有用的方法是在SO thread ...

但我决定走中间道路：

<强> my.component.ts

import template from './my.component.temlate.html'
import style from './my.component.temlate.css'

@Component({
  selector: 'app-my-component',
  template: template + '',
  styles: [style + '']
})

<强> my.component.temlate.html.ts

export default `
<div data-padding-top></div>
...
`

<强> my.component.temlate.css.ts

export default `
:host {
  overflow-anchor: none;
  overflow-y: auto;
}
`

Answer 2

从6版本开始，您可以告诉角度编译器在构建过程中将模板html文件转换为嵌入式模板。

将$HOME/.embedmongo/linux/mongodb-linux-x86_64-3.2.2.tgz下的spring.mongodb.embedded.version = 3.4.6添加到库文件夹中的"enableResourceInlining": true文件中，以将html文件转换为角度组件的内联模板。

angularCompilerOptions

Answer 3

您在这里使用moduleId: module.id所以不需要使用相对路径，

只需从./和templateUrl移除styleUrls。

@Component({
  moduleId: module.id,
  selector: 'hp-text-input',
  templateUrl: 'text-input.component.html',
  styleUrls: ['text-input.component.scss']
})

Answer 4

我最终使用gulp来执行此任务，因为角度CLI无法实现。我使用了本教程：How to set up an angular 2 component library

我必须注意，这可能不是AOT兼容的。但是项目还没有进入那个阶段，所以当我们需要准备生产时就会到来。那时我会更新答案。

=======

<强>更新

我最终使用了ng-packagr，因为angular也采用了它。虽然您需要注意使用与角度版本相对应的版本

，但效果很好

在组件库中找不到Angular html文件

4 个答案: