如何在Angular 12中使用Handlebars

Question

如何在Angular 12中使用Handlebars

3

我曾经能够在Angular 11中使用Handlebars，但是自从我更新到Angular 12后，我遇到了以下错误：

./node_modules/handlebars/lib/index.js:25:2-9 - 警告：关键依赖项：require函数的使用方式无法静态提取依赖项
./node_modules/handlebars/lib/index.js:23:38-45 - 错误：模块未找到：错误：在'/node_modules/handlebars/lib'中无法解析'.'

我像这样导入Handlebars：

import * as handlebars from 'handlebars';

我已经尝试将Handlebars添加到angular.json中，如下所示，但似乎没有任何作用。

"node_modules/handlebars/dist/handlebars.min.js"

- sergenn

你在使用handlebars时特别关注的是与angular的关系吗？这个问题有点令人困惑，因为angular有自己的模板系统来渲染组件模板中的数据。 - Alexander Staroselsky

@AlexanderStaroselsky 我正在使用handlebarsjs来验证用户输入的电子邮件模板，这些模板必须用handlebars编写。 - sergenn

你需要分享更多的代码。目前不清楚在你的应用中 Angular 是如何运作的，数据是如何提供给服务器和/或 Handlebars 模板的。使用 Angular 表单可以在提交表单或发送 HTTP 请求之前验证输入。也许可以展示一下你的 Angular 表单以及你想要验证的内容。 - Alexander Staroselsky

话虽如此，当您在项目中添加handlebars依赖项时，您的导入似乎是正确的：https://stackblitz.com/edit/angular-ivy-kvbih4 - Alexander Staroselsky

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- skink · Accepted Answer

2

从 handlebars/dist/amd/handlebars 或者 handlebars/dist/cjs/handlebars 导入是可行的，但是必须将 handlebars 包添加到 allowedCommonJsDependencies 中。

- skink

这个答案效果不好，在以下编译时失败：

如果存在，请尝试`npm i --save-dev @types/handlebars`，或添加一个新的声明(.d.ts)文件，其中包含`declare module 'handlebars/dist/amd/handlebars';``。

请问是否还有其他步骤？

- Michal Kliment

4

жҲ‘е·Із»ҸйҖҡиҝҮж·»еҠ дёҖдёӘеҗҚдёә handlebars.d.ts зҡ„ж–Үд»¶е№¶еҢ…еҗ«д»ҘдёӢеҶ…е®№жқҘдҪҝе…¶зј–иҜ‘жҲҗеҠҹпјҡ

declare module 'handlebars/dist/cjs/handlebars' {
  import * as Handlebars from 'handlebars';
  export const precompile: typeof Handlebars.precompile;
  export const compile: typeof Handlebars.compile;
}

иҝҷдёӘж–Үд»¶еЈ°жҳҺдәҶдёҖдёӘжЁЎеқ—пјҢе…¶дёӯеҜје…ҘдәҶ handlebars жЁЎеқ—пјҢе№¶е°Ҷе…¶е‘ҪеҗҚдёә HandlebarsгҖӮз„¶еҗҺеҜјеҮәдәҶдёӨдёӘеёёйҮҸпјҢеҲҶеҲ«жҳҜ precompile е’Ң compileпјҢе®ғд»¬зҡ„зұ»еһӢдёҺ Handlebars жЁЎеқ—дёӯеҜ№еә”зҡ„еҮҪж•°зұ»еһӢзӣёеҗҢгҖӮ - Joe Skeen

@JoeSkeen 你成功让它工作了吗？对我来说，编译通过了，但是在 node_modules 上出现了一个错误，我正在处理一个 Angular 项目。 - Andres2142

好的，让我查一下，然后分享要点。 - Joe Skeen