如何动态呈现 pug 文件而不是使用静态 angular-cli index.html？

Posted 2023-03-07

【中文标题】如何动态呈现 pug 文件而不是使用静态 angular-cli index.html？

【英文标题】：How to render pug file dynamically instead of using the static angular-cli index.html?

【发布时间】：2017-06-30 03:37:32

【问题描述】：

我有一个 Angular 2 应用程序，我需要渲染 index.pug 而不是使用 angular-cli 的静态 index.html。

那么这种事情的最佳做法是什么？

【参考方案1】：

好吧，在没有任何运气的情况下进行了很多谷歌搜索后，我想出了以下解决方法：

在

angular-cli.json

中将 "index": "index.html" 更改为 "index": "index.pug" 将

index.html

重命名为

index.pug

并将其内容更改为

pug

内容。

在 index.pug 中，您应该有两个 cmets 来放置您的样式和脚本，如下所示：

head
  // the next comment is important to replace with styles.
  //- styles
body
  app-root Loading...
  // the next comment is important to replace with scripts.
  //- scripts

在你的根目录下创建 parse-index.js 并输入以下代码：

'use strict';

const fs = require('fs');

const INDENT = '    ';

const INDEX = './dist/index.pug';

let index = fs.readFileSync(INDEX);
index = index.toString()
  .replace(/<(\s+)?head(\s+)?>|<(\s+)?\/(\s+)?head(\s+)?>/g, '');

let linkPattern = /<(\s+)?link[^<>]+\/?(\s+)?>/g;

let links = index.match(linkPattern);

let scriptPattern = /<(\s+)?script[^<]+<(\s+)?\/(\s+)?script(\s+)?>/g;

let scripts = index.match(scriptPattern);

index = index.replace(linkPattern, '');
index = index.replace(scriptPattern, '');

scripts.forEach((script, index) => 
  scripts[index] = script.replace(/<|>.+/g, '').replace(/\s/, '(') + ')';
);

links.forEach((link, index) => 
  links[index] = link.replace(/<|\/(\s+)?>(.+)?/g, '')
    .replace(/\s/, '(') + ')';
);

index = index.replace(
  /\/\/(\s+)?-?(\s+)?scripts/g, scripts.join('\n' + INDENT)
);

index = index.replace(/\/\/(\s+)?-?(\s+)?styles/g, links.join('\n' + INDENT));

fs.writeFileSync(INDEX, index);

最后，在

package.json

的

postinstall

中输入：ng build --prod && node parse-index.js

希望有人介绍更好的方法！

【参考方案2】：

看this manual，可以覆盖angular-cli webpack config。