解决“Angular SSR 9中的‘twice loading image and flickering site’问题”可以使用以下代码示例:
在Angular SSR 9中,可以使用ngx-universal-injector
库来解决这个问题。该库可以在服务器端和客户端之间共享状态,以便避免重复加载图片和闪烁网站。
首先,安装ngx-universal-injector
库:
npm install ngx-universal-injector
然后,在你的Angular项目中创建一个服务,例如shared-state.service.ts
:
import { Injectable } from '@angular/core';
import { UniversalInjector } from 'ngx-universal-injector';
@Injectable({
providedIn: 'root'
})
export class SharedStateService {
private sharedState: any = {};
constructor(private universalInjector: UniversalInjector) {
this.sharedState = this.universalInjector.get('sharedState') || {};
this.universalInjector.set('sharedState', this.sharedState);
}
public getSharedState(): any {
return this.sharedState;
}
}
接下来,在你的组件中使用SharedStateService
来共享图片加载状态:
import { Component, OnInit } from '@angular/core';
import { SharedStateService } from './shared-state.service';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent implements OnInit {
isLoading: boolean;
isLoaded: boolean;
constructor(private sharedStateService: SharedStateService) {}
ngOnInit() {
const sharedState = this.sharedStateService.getSharedState();
this.isLoading = sharedState.isLoading || false;
this.isLoaded = sharedState.isLoaded || false;
}
onImageLoad() {
this.isLoading = false;
this.isLoaded = true;
const sharedState = this.sharedStateService.getSharedState();
sharedState.isLoading = this.isLoading;
sharedState.isLoaded = this.isLoaded;
}
}
最后,在服务器端的main.server.ts
文件中,使用ngx-universal-injector
来共享图片加载状态:
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { createServerRenderer, RenderResult } from 'ngx-universal-injector';
import * as fs from 'fs';
import * as path from 'path';
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
enableProdMode();
const indexHtml = fs.readFileSync(path.resolve(__dirname, './dist/browser/index.html'), 'utf-8');
const render = createServerRenderer((params: any): RenderResult => {
const { AppServerModule, LAZY_MODULE_MAP } = params;
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
const moduleFactory = AppServerModuleNgFactory || AppServerModule;
const moduleRef = moduleFactory.create(appInjector);
return {
moduleRef,
async render(document: any) {
const html = await renderModuleFactory(moduleFactory, {
document: indexHtml,
url: params.url,
extraProviders: [provideModuleMap(LAZY_MODULE_MAP)]
});
return {
html
};
}
};
});
export default render;
通过以上步骤,你可以在Angular SSR 9中解决“twice loading image and flickering site”的问题,实现“两次加载图片和闪烁的网站”的解决方案。