直到最近,我们还是使用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中对其进行设置吗?
答案 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))
})