Merge pull request #2078 from atmire/restore-csr-fallback

Let the production server "serve for direct CSR" if SSR is disabled or fails
This commit is contained in:
Tim Donohue
2023-02-10 10:51:24 -06:00
committed by GitHub
3 changed files with 15 additions and 34 deletions

View File

@@ -37,7 +37,6 @@ import { json } from 'body-parser';
import { existsSync, readFileSync } from 'fs'; import { existsSync, readFileSync } from 'fs';
import { join } from 'path'; import { join } from 'path';
import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode } from '@angular/core'; import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine'; import { ngExpressEngine } from '@nguniversal/express-engine';
@@ -65,7 +64,7 @@ const DIST_FOLDER = join(process.cwd(), 'dist/browser');
// Set path fir IIIF viewer. // Set path fir IIIF viewer.
const IIIF_VIEWER = join(process.cwd(), 'dist/iiif'); 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'); const cookieParser = require('cookie-parser');
@@ -258,7 +257,6 @@ function serverSideRender(req, res, sendToUser: boolean = true) {
baseUrl: environment.ui.nameSpace, baseUrl: environment.ui.nameSpace,
originUrl: environment.ui.baseUrl, originUrl: environment.ui.baseUrl,
requestUrl: req.originalUrl, requestUrl: req.originalUrl,
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
}, (err, data) => { }, (err, data) => {
if (hasNoValue(err) && hasValue(data)) { if (hasNoValue(err) && hasValue(data)) {
// save server side rendered page to cache (if any are enabled) // save server side rendered page to cache (if any are enabled)
@@ -292,13 +290,7 @@ function serverSideRender(req, res, sendToUser: boolean = true) {
* @param res current response * @param res current response
*/ */
function clientSideRender(req, res) { function clientSideRender(req, res) {
res.render(indexHtml, { res.sendFile(indexHtml);
req,
providers: [{
provide: APP_BASE_HREF,
useValue: req.baseUrl
}]
});
} }

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>

View File

@@ -2,21 +2,27 @@ import 'zone.js';
import 'reflect-metadata'; import 'reflect-metadata';
import 'core-js/es/reflect'; import 'core-js/es/reflect';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { load as loadWebFont } from 'webfontloader'; import { load as loadWebFont } from 'webfontloader';
import { hasValue } from './app/shared/empty.util';
import { BrowserAppModule } from './modules/app/browser-app.module'; import { BrowserAppModule } from './modules/app/browser-app.module';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
import { AppConfig } from './config/app-config.interface'; import { AppConfig } from './config/app-config.interface';
import { extendEnvironmentWithAppConfig } from './config/config.util'; import { extendEnvironmentWithAppConfig } from './config/config.util';
import { enableProdMode } from '@angular/core';
const bootstrap = () => platformBrowserDynamic() const bootstrap = () => platformBrowserDynamic()
.bootstrapModule(BrowserAppModule, {}); .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 = () => { const main = () => {
// Load fonts async // Load fonts async
// https://github.com/typekit/webfontloader#configuration // https://github.com/typekit/webfontloader#configuration
@@ -30,22 +36,23 @@ const main = () => {
enableProdMode(); enableProdMode();
} }
if (hasValue(environment.universal) && environment.universal.preboot) { if (hasTransferState) {
// Configuration will be taken from transfer state during initialization
return bootstrap(); return bootstrap();
} else { } else {
// Configuration must be fetched explicitly
return fetch('assets/config.json') return fetch('assets/config.json')
.then((response) => response.json()) .then((response) => response.json())
.then((appConfig: AppConfig) => { .then((appConfig: AppConfig) => {
// extend environment with app config for browser when not prerendered // extend environment with app config for browser when not prerendered
extendEnvironmentWithAppConfig(environment, appConfig); extendEnvironmentWithAppConfig(environment, appConfig);
return bootstrap(); return bootstrap();
}); });
} }
}; };
// support async tag or hmr // support async tag or hmr
if (document.readyState === 'complete' && hasValue(environment.universal) && !environment.universal.preboot) { if (document.readyState === 'complete' && !hasTransferState) {
main(); main();
} else { } else {
document.addEventListener('DOMContentLoaded', main); document.addEventListener('DOMContentLoaded', main);