6

我正在为 Angular 构建一个组件库，我们将在项目之间共享它。但是当我构建包时，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"
  },

我尝试过搜索，但大多数结果都已过时或严重依赖更多依赖项。我缺少一些配置吗？

4

4 回答 4

3

对于 Angular 6 以后，您可以告诉 Angular 编译器在构建期间将您的模板 html 文件转换为内联模板。

添加"enableResourceInlining": true 到angularCompilerOptions您tsconfig.lib.json的库文件夹内的文件中，以将 html 文件转换为角度组件的内联模板。

  "angularCompilerOptions": {
    "enableResourceInlining": true
  },
于 2018-08-08T15:45:19.387 回答
2

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

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

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

但我决定走中间道路：

我的.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 + '']
})

我的.component.template.html.ts

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

我的.component.template.css.ts

export default `
:host {
  overflow-anchor: none;
  overflow-y: auto;
}
`
于 2018-01-14T19:16:43.630 回答
0

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

只需./从templateUrl和中删除styleUrls。

@Component({
  moduleId: module.id,
  selector: 'hp-text-input',
  templateUrl: 'text-input.component.html',
  styleUrls: ['text-input.component.scss']
})
于 2018-01-11T15:46:19.320 回答
0

我最终使用 gulp 来完成这项任务，因为 Angular CLI 尚无法实现。我使用了本教程：如何设置 Angular 2 组件库

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

=======

更新

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

于 2018-01-14T12:28:06.457 回答