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

我使用的是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)">

./src/app/features/projects/projects.page.html中的

错误1:0
模块分析失败：意外令牌（1:0）
您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看见https://webpack.js.org/concepts#loaders
> 

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

您可以创建一个template.ts文件，如下所示：

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

export default template;

---

我也有同样的问题，我在一个typescript文件中使用html模板修复了它

您可以创建一个template.ts文件，如下所示：

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

export default template;

---

正如在评论中提到的@htn-将需要原始加载程序网页

npm i -D @angular-builders/custom-webpack
npm i -D raw-loader

更新angular.json

"architect": {
    "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
            "customWebpackConfig": {
                "path": "./webpack.config.js"
            },
            ...
        }
    }
}
...

"serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
        "customWebpackConfig": {
            "path": "./webpack.config.js"
        },
        "browserTarget": "okwiki:build",
        ...
    }
}
...

添加

html.d.ts

：

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

它的工作原理是：

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

---

正如在评论中提到的@htn-将需要原始加载程序网页

npm i -D @angular-builders/custom-webpack
npm i -D raw-loader

更新angular.json

"architect": {
    "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
            "customWebpackConfig": {
                "path": "./webpack.config.js"
            },
            ...
        }
    }
}
...

"serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
        "customWebpackConfig": {
            "path": "./webpack.config.js"
        },
        "browserTarget": "okwiki:build",
        ...
    }
}
...

添加

html.d.ts

：

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

它的工作原理是：

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

---

如果您只想在ts代码中获取组件的html，可以使用ViewChild引用例如：`@ViewChild（'abc'，{read:ElementRef，static:true}）htmlRef:ElementRef；htmlRef.nativeElement.innerHTML`应该为您提供组件的html。我不想将其包含在DOM中以供以后阅读……为此，您需要原始加载程序webpack，它将文本文件转换为javascript模块。如果您只想在ts代码中获取组件的html，您可以使用ViewChild引用例如：`@ViewChild（'abc'，获得它，{read:ElementRef，static:true}）htmlRef:ElementRef；htmlRef.nativeElement.innerHTML`应该提供组件的html。我不想将其包含在DOM中供以后阅读…为此，您需要原始加载程序webpack，它将文本文件转换为javascript模块IP，这肯定会起作用，但这不是我要寻找的…是的，这肯定会起作用b但这不是我想要的。。。