具有动态值的Angular index.html | web worker

Question

直到最近，我们还使用express.js为Angular提供index.html，因为在应用程序启动之前，我们需要从数据库中填充动态变量。

<script> window .__ envs = {{{json envs}}} </script>

然而，新的Angular 7通过web worker缓存源index.html。

因此，当我加载网页时，它不会正确加载，直到我点击重新加载。

我试图从网络工作者禁用index.html。什么也没发生。

我试着关闭网络工作者，并将其到处删除。现在我不必使用硬重载，但第一次加载仍然会显示源文件，而不是通过express.js 修改的

1) 源为什么加载源文件，以及它是如何到达源文件的？

2) 我可以在网络工作者中设置它吗？

Answer 1

您可以在模块中使用APP_INITIALIZER，并使用工厂加载如下所示的提供商服务：

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule
],
providers: [
ServiceProvider, 
{ provide: APP_INITIALIZER, useFactory: ServiceProviderFactory, deps: [ServiceProvider], multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }

您的服务以获取数据作为服务：

@Injectable()
export class ServiceProvider{
constructor(private http: Http) {
}
getInitialData(){
// your fetch logic from API
}
}

您的服务工厂(附加模块)：

export function ServiceProviderFactory(provider: ServiceProvider) {
return () => provider.getInitialData();
}

Answer 2

谢谢你的回答，但没有人能准确地解决我的问题。我不能使用APP_INITIALIZER，因为我现在不知道API_URL，这是我需要传递给应用程序的内容之一。它是动态值，因此不能是process.env的一部分。

禁用缓存index.html对我来说无法正常工作。

但解决方案很简单

我没有直接更改index.html文件，而是将<script src="/envs">放入其中我在express.js 中公开了这个文件

app.get('/envs', async (req, res) => {
const envs = ...
res.end('window.__envs = ' + JSON.stringify(envs))
})

Answer 3

刷新两次后，索引文件会更新，这是正常的。

服务工作者实现的缓存机制将检查哈希和，以检测文件的任何更改。如果哈希值不同，将下载新版本并缓存(但不会从第一次开始显示)。

第二次刷新后，您将看到更新的版本。

如果您根本不需要缓存，您可以从angular.json:禁用您的服务工作者

"configurations": {
"production": {
"serviceWorker": false,
"ngswConfigPath": "src/ngsw-config.json"
}
}

此外，您还可以监听更改(软件工作人员在找到新版本时进行检测)，并通过刷新页面的按钮向用户显示正确的消息。看看这里如何捕捉和处理更新过程。

祝你好运！