Angular SSR - Error: Cannot find module '@firebase/app' #3124
Description
Version info
Angular: 13.12
Firebase: 8.10.0
AngularFire: 6.1.5
Other (e.g. Ionic/Cordova, Node, browser, operating system): Node
I wanted an angular SSR app, but for some reason I always get a bug after the build.
I don't want to install anything on the server side.
Thank you for your help!
server.ts
import 'zone.js/node';
import 'zone.js/dist/zone-patch-rxjs';
import {ngExpressEngine} from '@nguniversal/express-engine';
import * as express from 'express';
import {join} from 'path';
import * as redis from 'redis';
import * as morgan from 'morgan';
import { enableProdMode } from '@angular/core';
import {AppServerModule} from './src/main.server';
import {APP_BASE_HREF} from '@angular/common';
import {existsSync} from 'fs';
import {REQUEST, RESPONSE} from '@nguniversal/express-engine/tokens';
import {environment} from './src/environments/environment';
// Polyfills required for Firebase
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
// Faster renders in prod mode
enableProdMode();
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), environment.production ? 'browser' : 'dist/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
const redisClient = redis.createClient({
host: environment.redis.host,
db: environment.redis.db,
auth_pass: environment.redis.auth_pass,
prefix: environment.redis.prefix,
});
const cacheKey: (req: express.Request) => string = (req) => `:ssr:${req.originalUrl}`;
server.engine('html', (_, options: any, callback) =>
ngExpressEngine({
bootstrap: AppServerModule,
providers: [
{provide: REQUEST, useValue: options.req},
{provide: RESPONSE, useValue: options.req.res},
],
})(_, options, callback)
);
server.set('view engine', 'html');
server.set('views', distFolder);
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All defend guarded page
server.get('/admin*', (req, res) => {
res.sendFile(join(distFolder, 'index.html'));
});
server.get('/profil*', (req, res) => {
res.sendFile(join(distFolder, 'index.html'));
});
server.get('/penztar*', (req, res) => {
res.sendFile(join(distFolder, 'index.html'));
});
// sitemap SEO
server.get('/assets/sitemap/gallery.xml', (req, res) => {
res.redirect(301, environment.production ? 'https://us-central1-konigs-art-kft.cloudfunctions.net/sitemap/assets/sitemap/gallery.xml' : 'https://us-central1-konigs-art-kft-dev.cloudfunctions.net/sitemap/assets/sitemap/gallery.xml');
});
server.get('/assets/sitemap/blogs.xml', (req, res) => {
res.redirect(301, environment.production ? 'https://us-central1-konigs-art-kft.cloudfunctions.net/sitemap/assets/sitemap/blogs.xml' : 'https://us-central1-konigs-art-kft-dev.cloudfunctions.net/sitemap/assets/sitemap/blogs.xml');
});
server.get('/assets/sitemap/products.xml', (req, res) => {
res.redirect(301, environment.production ? 'https://us-central1-konigs-art-kft.cloudfunctions.net/sitemap/assets/sitemap/products.xml' : 'https://us-central1-konigs-art-kft-dev.cloudfunctions.net/sitemap/assets/sitemap/products.xml');
});
const cachedResponse: express.RequestHandler = (req, res, next) => {
return redisClient.get(cacheKey(req), (error: any, reply: any) => {
reply?.length ? res.send(reply) : next();
});
};
const universalRenderer: express.RequestHandler = (req, res) => {
res.render(indexHtml, {req, providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}]}, (err: Error, html: string) => {
if (err) res.send(err);
if (res.statusCode === 200) redisClient.set(cacheKey(req), html, 'EX', environment.ssr.ttl_cache);
res.send(html);
});
};
const universalPreRenderer: express.RequestHandler = (req, res) => {
req.url = req.url.replace('/ssr/', '/');
req.originalUrl = req.originalUrl.replace('/ssr/', '/');
res.render(indexHtml, {req, providers: [{provide: APP_BASE_HREF + 'ssr/', useValue: req.baseUrl + 'ssr/'}]}, ((err: Error, html) => {
if (err) res.send(err);
if (res.statusCode === 200) redisClient.set(cacheKey(req), html, 'EX', environment.ssr.ttl_cache);
res.redirect(req.url);
}));
};
server.use(morgan(':method :url :status :remote-addr :referrer :response-time ms :total-time ms'));
server.get('/ssr/*', universalPreRenderer);
server.get('*', cachedResponse, universalRenderer);
return server;
}
function run(): void {
const port = process.env.PORT || 4000;
const server = app();
server.listen(port, () => {
console.log(`FIÜK SSR Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';