Как рендерить файл мопса динамически вместо использования static angular-cli index.html?

Question

У меня есть угловое приложение 2, и мне нужно визуализировать index.pug вместо использования статического index.html of angular-cli.

Итак, что лучше всего подходит для такой вещи?

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, вы можете переопределить конфигурацию web-контейнера angular-cli.