javascript - Angular 9 如何使用 TypeScript 将 HTML 文件导入为字符串？

Question

我正在使用 Angular 9.1.3 和 Typescript 3.8.3。

我想将 html 文件作为原始字符串导入。

案例:

import * as template from "./projects.page.html";
console.log("Template: ", template);

我收到错误:

ERROR in src/app/features/projects/projects.page.ts:41:27 - error TS2307: Cannot find module './projects.page.html'.

41 import * as template from "./projects.page.html";

如果我添加 html.d.ts 文件:

declare module "*.html" {
    const content: string;
    export default content;
}

我遇到错误:

ERROR in ./src/app/features/projects/projects.page.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div style="height: calc(100vh - 64px)">

Answer 1

我遇到了同样的问题，我使用 typescript 文件中的 html 模板修复了它。

您可以像这样创建一个 template.ts 文件:

const template = `
  <div> Your template here! </div> 
`;

export default template;

你可以简单地以这种方式导入文件:

import template from "./template";