How to use Handlebars.js in Angular 6+ CLI?

Question

I would like to render a basic customer letter either in plain text format or HTML format so the customer could further edit in TextArea or a HTML Editor. I am thinking of using Handlebars.js to render a HTML template with mustache tags along with a JSON object containing various business info.

I had done:

import * as Handlebars from 'handlebars';

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

When compiling with Angular Cli, I got the following error:

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'

I am using Angular 7.2.6 and Angular CLI 7.3.3. How to make Handlebars.js work with Angular2+? Or, is it possible to use some low level Angular API to render/compile a template with mustache along with JSON data into a standard HTML/Text string ?

Answer 1

You can try to use different import:

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