如何動態呈現pug文件而不是使用靜態angular-cli index.html？

Question

我有一個角度2應用程序，我需要呈現index.pug而不是使用angular-cli的靜態index.html。

那麼這種事情的最佳做法是什麼？

Answer 1

好吧，谷歌上搜索了大量沒有任何的運氣後，我想出了以下解決方法：

• 在角cli.json變化"index": "index.html"到"index": "index.pug"
• 的index.html重命名爲index.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 
  

• 在你的根目錄下創建解析-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安裝後把這個：ng build --prod && node parse-index.js

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

Answer 2

看看this manual，你可以覆蓋angular-cli的webpack配置。