Как внедрить сценарии в индексный файл html в сгенерированном индексе. html в dist / <appName>? - PullRequest
0 голосов
/ 05 февраля 2020

У меня есть файл индекса html, и мне нужно внедрить некоторые скрипты на основе конфигурации в производственную / промежуточную среду.

Индекс рабочего пространства. html

<body>
  <app-root></app-root>
</body>

Сгенерированный индекс. html в dist / my-app через ng build

<body>
  <app-root></app-root>
  <script src="runtime-es5.js" nomodule defer></script>
  <script src="polyfills-es5.js" nomodule defer></script>
  <script src="styles-es5.js" nomodule defer></script>  
  <script src="vendor-es5.js" nomodule defer></script> 
  <script src="main-es5.js" nomodule defer></script>
</body>

Мои требования:

<body>
  <app-root></app-root>
  <script src="script-staging.js"></script>
  <script src="runtime-es5.js" nomodule defer></script>
  <script src="polyfills-es5.js" nomodule defer></script>
  <script src="styles-es5.js" nomodule defer></script>  
  <script src="vendor-es5.js" nomodule defer></script> 
  <script src="main-es5.js" nomodule defer></script>
</body>

Я использую Angular 8 + Webpack с CLI. Я включил custom-webpack.configuration. js Указано с angular. json. Я пытаюсь добиться этого, используя HTMLWebpackPlugin.

Примите к сведению, что загрузка сценария динамического c является необязательной, означает, что я буду вставлять или не вставлять этот сценарий. js в сгенерированный индекс. html, что будет решаться во время сборки. Таким образом, внедрение скрипта в сгенерированный html должно быть сделано во время сборки, что я должен сделать через плагин веб-пакета.

Любая помощь будет признательна, борется в течение нескольких дней.

1 Ответ

0 голосов
/ 05 февраля 2020

Вы можете указать полный путь от ./scr/script-staging.js в angular. json в массиве скриптов вашего объекта приложения.

Здесь показано: -

"styles": [
  "styles.scss"
],
// like this
"scripts": [
  "./src/script-staging.js"
]

После добавления этой строки кода вы должны снова собрать свое приложение "ng build" / "ng build --prod" и, надеюсь, если все будет в порядке, тогда он должен добавить ваш файл в индекс. html.

...