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

问题描述

我正在为 angular 构建一个组件库，我们将在项目间共享它.但是当我构建包时，html 文件不会被复制到 dist 文件夹中.我收到错误 angular Failed to load 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

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

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 来完成这项任务，因为 angular CLI 尚无法实现.我使用了本教程:如何设置angular 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.

========

更新

我最终使用了 ng-packagr，因为 angular 也采用了它.虽然你需要注意使用哪个版本与 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 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！