Búsqueda de sitios web

typescript - ¿Cómo usar Handlebars.js en Angular 6+ CLI?


Me gustaría generar una carta básica para el cliente ya sea en formato de texto simple o en formato HTML para que el cliente pueda editarla posteriormente en un TextArea o un Editor HTML. Estoy pensando en usar Handlebars.js para renderizar una plantilla HTML con etiquetas mustache junto con un objeto JSON que contenga diversa información empresarial.

Yo había hecho:

import * as Handlebars from 'handlebars';

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

Al compilar con Angular CLI, obtuve el siguiente 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'

Estoy usando Angular 7.2.6 y Angular CLI 7.3.3. ¿Cómo hacer que Handlebars.js funcione con Angular2+? O, ¿es posible usar alguna API de bajo nivel de Angular para renderizar/compilar una plantilla con mustache junto con datos JSON en una cadena HTML/Text estándar?

Respuesta #1

Puedes intentar usar una importación diferente:

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

Artículos relacionados