具有动态值的Angular index.html |网络工作者

时间:2019-04-07 02:15:42

标签: angular web-worker

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

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

但是,新的Angular 7通过Web-worker缓存了源index.html。

因此,当我加载Web时,只有在单击重新加载后,它才能正确加载。

我尝试从Webworker禁用index.html。什么都没发生。

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

1)为什么源代码会加载源文件以及如何获取源文件?

2)我可以在Webworker中对其进行设置吗?

3 个答案:

答案 0 :(得分:3)

您可以在模块中使用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();
}

答案 1 :(得分:0)

通常,刷新两次后会更新索引文件。

由Service Worker实现的缓存机制将检查Hash Sum,以检测文件的任何更改。如果哈希值不同,则将下载新版本并进行缓存(但不会从第一次显示)。

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

如果根本不需要缓存,则可以从 angular.json

禁用服务工作者。
"configurations": {
     "production": {
          "serviceWorker": false,
          "ngswConfigPath": "src/ngsw-config.json"
     }
}

此外,您还可以侦听更改(SW工作者会检测到何时找到新版本),并通过按钮向用户显示正确的消息以刷新页面。看看here如何捕获和处理更新过程。

祝你好运!

答案 2 :(得分:0)

感谢您的回答,但没有人能完全解决我的问题。 我无法使用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))
})