我正在为 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"
},
我尝试过搜索，但大多数结果都已过时或严重依赖更多依赖项。我缺少一些配置吗？
