Question

我有一个Angular应用，其中包含网络工作者实现（通过ng generate webWorker生成）。

我要标记给定的网络工作者进行预加载，如下所示：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
   ...
    <link rel="prefetch" href="worker.js" />
   ...
  </head>
 ....
</html>

问题是worker.js文件的名称是通过Angular CLI生成的，例如0.7841408a8c7c04e45900.worker.js（与worker.ts捆绑销售）

是否有一种方法可以将文件名的占位符放入index.html中，在构建时将其替换为实际的文件名？

Answer 1

在angular.json文件中，在脚本中提及辅助文件路径部分。

for

默认情况下，Angular将注入脚本中提到的文件直接将数组放入html中。如果您不想注入角您可以按如下所示传递配置对象：

FOR /r %F IN (*.mkv) DO (@ffmpeg \
  -find_stream_info -i "%F" \
  -map 0 -codec copy -codec:s mov_text "%~pnF.mp4" \
  -hide_banner -loglevel warning -y)

在上述情况下，您可以更好地控制捆绑的js文件的名称。由于您知道捆绑包的名称，因此可以直接在html中将其指定为

build: {
    ...,
    options: {
        "scripts": ['./worker.js']
    }
}

希望这会有所帮助。

Answer 2

我不得不采取的措施是关闭文件名的输出哈希。在`SYNTHJOIN_9445517e`.`SYNTHJOIN_e7712c1dSYNTHJOIN_ae302cd9bi_financial_timeFINANCIAL_DATE` `_SYNTHJOIN_9445517e___SYNTHJOIN_e7712c1dSYNTHJOIN_ae302cd9bi_financial_timeFINANCIAL_DATE_`, `SYNTHJOIN_9445517e`.`SYNTHJOIN_e7712c1dSYNTHJOIN_ae302cd9SYNTHJOIN_f7386c62SYNTHJOIN_12a564e7SYNTHJOIN_e7907874SYNTHJOIN_151b5d6fSYNTHJOIN_cc7708b9SYNTHJOIN_9a61ffc9SYNTHJOIN_425d41fbbi_marketMARKET_LEVEL_1` `_SYNTHJOIN_9445517e___SYNTHJOIN_e7712c1dSYNTHJOIN_ae302cd9SYNTHJOIN_f7386c62SYNTHJOIN_12a564e7SYNTHJOIN_e7907874SYNTHJOIN_151b5d6fSYNTHJOIN_cc7708b9SYNTHJOIN_9a61ffc9SYNTHJOIN_425d41fbbi_marketMARKET_LEVEL_1_`文件中：

angular.json

这样，您将获得纯文件名。因此，生成的工作文件将为"configurations": { "production": { //.. "outputHashing": "none", //... } }。

角度：index.html中的<link rel =“ preload”>用于生成的网络工作者

2 个答案: