Angular SSR - Error: Cannot find module '@firebase/app'

[Karman40]

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';

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[firstlinestudio]

Try adding this to your imports:

import '@angular/fire/firestore-protos';

That should pull in all the required Firebase files. You should also upgrade to Angular 7 / Firebase 9 for compatibility reasons. If not, downgrade your Angular version to 11 or 12.

[Karman40]

@firstlinestudio thank you for your replay!

I'am downgrade my angular version to v12 and added import '@angular/fire/firestore-protos';

./server.ts:14:0-40 - Error: Module not found: Error: Can't resolve '@angular/fire/firestore-protos' in 'D:\Frontend\königs-art'

[Karman40]

@jamesdaniels @firstlinestudio Do you have any idea what the problem might be? We're in the last step and I'm stuck here and I can't release the app,

[firstlinestudio]

@firstlinestudio thank you for your replay!

I'am downgrade my angular version to v12 and added import '@angular/fire/firestore-protos';

./server.ts:14:0-40 - Error: Module not found: Error: Can't resolve '@angular/fire/firestore-protos' in 'D:\Frontend\königs-art'

I would recommend upgrading to Firebase 9. If you must keep Firebase 8, try using the compat versions of all the Angular Fire tools. I.E. @angular/fire/compat/firestore