seo Question posted in
Some basic information to get you started with this can be found here.

Angular 8 Server Side Rendering not working with Firebase – SEO

I’m setting up an Angular 8 project with Angular Universal to make my project more SEO friendly. My actual blocker is when I want to run npm run server:ssr throw an error related to @firebase/app package.

I’m running the project on Windows 10 machine Angular 8 and Firebase ^6.2.0

angular.json file:

          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },

This is the message I get:

@firebase/app:
      Warning: This is a browser-targeted Firebase bundle but it appears it is being
      run in a Node environment.  If running in a Node environment, make sure you
      are using the bundle specified by the "main" field in package.json.

      If you are using Webpack, you can specify "main" as the first item in
      "resolve.mainFields":
      https://webpack.js.org/configuration/resolve/#resolvemainfields

      If using Rollup, use the rollup-plugin-node-resolve plugin and specify "main"
      as the first item in "mainFields", e.g. ['main', 'module'].
      https://github.com/rollup/rollup-plugin-node-resolve
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fix this problem by installing these two packages:

    npm i xmlhttprequest ws -s
npm i bufferutil utf-8-validate -s

    and adding it on the top of my server.ts file:

    (global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');

    Thanks for your help.


  2. 0

    The firebase bundle you are using is for the browser/client only. The code that is troubling you is located on the server-side.

    You need to import (and setup) firebase-admin for this to work on the server-side ( NodeJS ).

    If you are using the same code for both the client and the server, make sure to separate the client-side code with a flag like: 

    if( process.env.NODE_ENV === 'development') { 
    // client-side only code ... 
}

    Let me know if you need more help!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search