首先,确保你已经正确配置了Angular的SSR(服务器端渲染)环境。接下来,你可以尝试以下解决方法来解决Angular 7首次加载两次的问题。
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { environment } from '../environments/environment';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
BrowserModule.withServerTransition({ appId: 'my-app-id' }),
BrowserTransferStateModule,
ServerModule,
ServerTransferStateModule,
ModuleMapLoaderModule,
RouterModule.forRoot([], { initialNavigation: 'enabled' }),
AppModule
],
bootstrap: [AppComponent]
})
export class AppServerModule { }
import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import { renderModuleFactory } from '@angular/platform-server';
enableProdMode();
const app = express();
const port = process.env.PORT || 4000;
const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = readFileSync(join(distFolder, 'index.html'), 'utf-8');
app.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
app.get('*', (req, res) => {
renderModuleFactory(AppServerModuleNgFactory, { document: indexHtml, url: req.url })
.then(html => {
res.status(200).send(html);
})
.catch(err => {
console.error(err);
res.sendStatus(500);
});
});
app.listen(port, () => {
console.log(`Node server listening on http://localhost:${port}`);
});
My App
使用以上解决方法,你应该能够解决Angular 7首次加载两次的SSR问题。