如何在 Angular 6+ CLI 中使用 Handlebars.js？

Question

我想以纯文本格式或 HTML 格式呈现基本的客户信函，以便客户可以在 TextArea 或 HTML 编辑器中进一步编辑。我正在考虑使用 Handlebars.js 来呈现带有小胡子标签的 HTML 模板以及包含各种业务信息的 JSON 对象。

我做过：

import * as Handlebars from 'handlebars';

...
            const template = Handlebars.compile(this.exampleHtmlTemplate);
            this.note = template({ title: 'My title', body: 'My body' });

使用 Angular Cli 编译时，出现以下错误：

chunk {vendor} vendor.js, vendor.js.map (vendor) 7.84 MB [initial] [rendered]

WARNING in ./node_modules/handlebars/lib/index.js 22:38-56
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./node_modules/handlebars/lib/index.js 23:2-20
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./node_modules/handlebars/lib/index.js 24:2-20
require.extensions is not supported by webpack. Use a loader instead.

ERROR in ./node_modules/handlebars/lib/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\...\NGSource\node_modules\handlebars\lib'

我正在使用 Angular 7.2.6 和 Angular CLI 7.3.3。如何使 Handlebars.js 与 Angular2+ 一起工作？或者，是否可以使用一些低级别的 Angular API 将带有小胡子的模板与 JSON 数据一起渲染/编译为标准的 HTML/文本字符串？

Answer 1

您可以尝试使用不同的导入：

import * as Handlebars from 'handlebars/dist/cjs/handlebars';