hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix direct CSR

Browse Source 
By moving from environment.ts to config.yml we made it so the environment is _not_ up to date with the server configuration when main.js is first loaded.
Because of this the app behaved as if CSR always happened _after_ SSR, effectively breaking direct CSR.

Here the "criterion" for SSR/non-SSR HTML is changed from the related configuration property to the presence of Angular Universal transfer state.

This means we can correctly determine when to bootstrap the app for direct CSR, and it's' now "safe" to just send index.html by itself.
This commit is contained in:
Yury Bondarenko
2023-02-07 15:01:01 +01:00
parent ca864379c8
commit 88cb397dc9
3 changed files with 18 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
server.ts
View File

@@ -31,7 +31,6 @@ import * as expressStaticGzip from 'express-static-gzip';
import { existsSync, readFileSync } from 'fs';
import { join } from 'path';
import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
@@ -57,7 +56,7 @@ const DIST_FOLDER = join(process.cwd(), 'dist/browser');
// Set path fir IIIF viewer.
const IIIF_VIEWER = join(process.cwd(), 'dist/iiif');
const indexHtml = existsSync(join(DIST_FOLDER, 'index.html')) ? 'index.html' : 'index';
const indexHtml = join(DIST_FOLDER, 'index.html');
const cookieParser = require('cookie-parser');
@@ -207,7 +206,6 @@ function ngApp(req, res) {
baseUrl: environment.ui.nameSpace,
originUrl: environment.ui.baseUrl,
requestUrl: req.originalUrl,
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
}, (err, data) => {
if (hasNoValue(err) && hasValue(data)) {
res.locals.ssr = true; // mark response as SSR
@@ -222,25 +220,15 @@ function ngApp(req, res) {
if (hasValue(err)) {
console.warn('Error details : ', err);
}
res.render(indexHtml, {
req,
providers: [{
provide: APP_BASE_HREF,
useValue: req.baseUrl
}]
});
res.sendFile(indexHtml);
}
});
} else {
// If preboot is disabled, just serve the client
console.log('Universal off, serving for direct CSR');
res.render(indexHtml, {
req,
providers: [{
provide: APP_BASE_HREF,
useValue: req.baseUrl
}]
});
res.sendFile(indexHtml);
}
}

18
src/index.csr.html
View File

@@ -1,18 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>DSpace</title>
<meta name="viewport" content="width=device-width,minimum-scale=1">
</head>
<body>
<ds-app></ds-app>
</body>
<!-- this is needed for CSR fallback -->
<script async src="client.js"></script>
</html>

19
src/main.browser.ts
View File

@@ -2,21 +2,27 @@ import 'zone.js';
import 'reflect-metadata';
import 'core-js/es/reflect';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { load as loadWebFont } from 'webfontloader';
import { hasValue } from './app/shared/empty.util';
import { BrowserAppModule } from './modules/app/browser-app.module';
import { environment } from './environments/environment';
import { AppConfig } from './config/app-config.interface';
import { extendEnvironmentWithAppConfig } from './config/config.util';
import { enableProdMode } from '@angular/core';
const bootstrap = () => platformBrowserDynamic()
.bootstrapModule(BrowserAppModule, {});
/**
* We use this to determine have been serven SSR HTML or not.
*
* At this point, {@link environment} may not be in sync with the configuration.
* Therefore, we cannot depend on it to determine how to bootstrap the app.
*/
const hasTransferState = document.querySelector('script#dspace-angular-state') !== null;
const main = () => {
// Load fonts async
// https://github.com/typekit/webfontloader#configuration
@@ -30,22 +36,23 @@ const main = () => {
enableProdMode();
}
if (hasValue(environment.universal) && environment.universal.preboot) {
if (hasTransferState) {
// Configuration will be taken from transfer state during initialization
return bootstrap();
} else {
// Configuration must be fetched explicitly
return fetch('assets/config.json')
.then((response) => response.json())
.then((appConfig: AppConfig) => {
// extend environment with app config for browser when not prerendered
extendEnvironmentWithAppConfig(environment, appConfig);
return bootstrap();
});
}
};
// support async tag or hmr
if (document.readyState === 'complete' && hasValue(environment.universal) && !environment.universal.preboot) {
if (document.readyState === 'complete' && !hasTransferState) {
main();
} else {
document.addEventListener('DOMContentLoaded', main);