在组件库中找不到Angular HTML文件 [英] Angular html file not found in component library

问题描述

我正在为angular建立一个组件库，我们将在各个项目之间共享它们。但是，当我构建软件包时，html文件不会被复制到dist文件夹。我收到错误 angular无法加载text-input.component.html 的错误。

I'm building a component library for angular which we will share across projects. But when i build the package the html files don't get copied to the dist folder. I get the error angular Failed to load text-input.component.html.

这是我的tsconfig.json：

This is my 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

这是模板网址的未编译组件：

This is the uncompiled component with the template 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中的构建脚本：

These are my build scripts in package.json:

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

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

I've tried searching but most of the results are outdated or rely heavily on more dependencies. is there some config i'm missing?

推荐答案

我最终使用gulp来完成此任务，因为角度CLI尚无法实现。我使用了本教程：如何设置一个有角度的2组件库

I ended up using gulp to do this task since it's not possible with the angular CLI yet. I used this tutorial: How to set up an angular 2 component library

我必须注意，这可能还不兼容AOT。但是该项目还没有进入该阶段，因此只有当我们需要准备生产时才可以进行。

I must note that this probably isn't AOT compatible yet. but the project isn't in that phase yet, so that'll come when we need to be production ready. I'll update the answer at that time.

========

UPDATE

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

I ended up using ng-packagr since angular also adopted it. Works nicely although you need to pay attention which version to use that corresponds with the angular version

这篇关于在组件库中找不到Angular HTML文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！