Question

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

那么这样做的最佳做法是什么？

Answer 1

好吧，经过谷歌搜索没有任何运气，我想出了以下解决方法：

在 angular-cli.json 中将"index": "index.html"更改为"index": "index.pug"
将 index.html 重命名为 index.pug ，并将其内容更改为 pug 内容。

在 index.pug 中，您应该有两条注释，您希望将样式和脚本放在以下位置：

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

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

Answer 2

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

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

2 个答案: