如何在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 / Text字符串？

Answer 1

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

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