Chrome не загружает скрипты / таблицы стилей в режиме Angular Prod

Question

Я развертываю свое приложение Angular на экспресс-сервере nodejs. Chrome не хочет загружать ничего, кроме index.html, так как он добавляет косую черту в конце URL-адреса для запроса GET, поэтому веб-сервер возвращает 404.

Это скриншот Моргана, когда Chrome загружает скрипты / таблицы стилей.

Это скриншот Firefox, корректно загружающий скрипты.

Я скомпилировал мое угловое приложение с параметрами --aot и --prod и поместил скомпилированные файлы в статическую папку dist. Сценарии, похоже, правильно встроены в index.html. Я действительно не вижу причин для этого странного поведения.

Answer 1

Хорошо, я решил проблему самостоятельно.После игры с настройками сборки я обнаружил, что проблема связана с флагом --prod.В процессе производственной сборки к разным именам файлов добавляются хеши или псевдослучайные байты, чтобы различать разные версии сборки.Хеш / псевдослучайные байты разделяются символом '.'из фактического имени файла, как видно на скриншотах.Каким-то образом Chrome делает странные вещи, когда вы добавляете '.'вот так в середине имени файла и облажается URL для запроса GET.(Как ни странно, так как Angular - это SPA-инфраструктура Google, браузер Chrome Google и все другие протестированные мною браузеры не имеют с этим проблем)

Tl; dr Удаление «.»из имен файлов и из скрипта src импорт в index.html решит проблему, и в Chrome все будет работать нормально.

Так что включите это

<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js">

для каждого загруженного скрипта/stylesheet.

<script type="text/javascript" src="runtime26209474bfa8dc87a77c.js">

PS для всех, кто интересуется, мой код на стороне сервера выглядит следующим образом:

app.use(express.static('dist/compiledapp'));

app.get('*', (req, res, next) => {
  res.sendFile(path.join(__dirname, '/dist/compiledapp/index.html'));
});