Angular 15中如何从外部库导出并使用HTML模板？

1. 从外部库导出HTML模板（仅支持TS文件导出） #

由于库的公共API仅允许导出TS文件，我们可以将HTML模板内容封装为TS字符串常量导出，具体有两种实现方案：

方案1：直接在TS文件中定义模板字符串 #

在库中创建一个用于导出模板的TS文件（如shared-templates.ts），将原myTemplate.html的内容直接作为字符串常量导出：

// 库的 src/lib/shared-templates.ts
export const MY_SHARED_TEMPLATE = `
<!-- 原myTemplate.html的完整内容 -->
<div class="template-container">
  <p>这是公共模板内容</p>
  <!-- 包含所有原HTML结构、Angular指令等 -->
</div>
`;

然后在库的public-api.ts中暴露这个导出，确保能被外部应用访问：

// 库的 public-api.ts
export * from './lib/shared-templates';

方案2：保留独立HTML文件并转为TS模块导出 #

如果希望保留单独的HTML文件结构，可通过配置库的构建工具，将HTML文件导入为字符串后导出：

1. 在库中创建myTemplate.html文件，保留原模板内容
2. 在shared-templates.ts中导入该HTML文件（Angular 15支持import断言）：

// 库的 src/lib/shared-templates.ts
import sharedTemplate from './myTemplate.html' assert { type: 'text' };
export const MY_SHARED_TEMPLATE = sharedTemplate;

3. 同样在public-api.ts中暴露该导出

2. 在应用组件中使用库中的模板 #

由于我们从库中导出的是模板字符串，需要将组件的templateUrl替换为template属性，直接使用导入的字符串常量：

// 应用中的MyComponent
import { Component } from '@angular/core';
// 导入库中的模板常量
import { MY_SHARED_TEMPLATE } from 'your-library-name';

@Component({
  selector: 'app-my-comp',
  // 替换templateUrl为template，使用导入的模板字符串
  template: MY_SHARED_TEMPLATE,
})
export class MyComponent {}

注意事项 #

• 如果模板中使用了Angular指令、管道或组件，需确保这些依赖已在库中导出，或应用的模块已导入对应的依赖模块
• 若坚持使用templateUrl，需将库中的HTML文件作为静态资源发布，并配置应用的angular.json使其能访问库的资源路径，但这种方式会失去TS模块导出的类型优势，不推荐

内容的提问来源于stack exchange，提问作者user22806183