Angular Fire with Universal SSR | Everything works, but the problem is while building my app

Viewed 414

This might be a duplicate question and there are a lot of questions similar to this one on GitHub as well. They all suggest workarounds that just doesn't work for me. I'm new to frontend frameworks and it's the curiosity that fueled me to do everything I did. So please be easy on me if this is a silly mistake.

Versions:

node: 12.12.0
angular cli: 8.3.23
@angular/fire: ^5.4.2
firebase: ^7.13.1

So as I said, everything works fine in dev mode, everything, not a single problem. The error shows up when I run a script 'universal-ssr@0.0.0 serve:ssr' where 'universal-ssr' being the name of my project. I've tried a lot of stuff but none came even close to solve the issue.

The script I executed:

npm run staging

The issue:

WARNING in ./node_modules/bytebuffer/dist/bytebuffer-node.js
Module not found: Error: Can't resolve 'memcpy' in '/home/de-10/VS Code Workspace/oms-v3/node_modules/bytebuffer/dist'
.
.
.
/home/de-10/VS Code Workspace/oms-v3/dist/server/main.js:226508
        throw new Error("package.json does not exist at " + package_json_path);
        ^

Error: package.json does not exist at /home/de-10/VS Code Workspace/oms-v3/dist/package.json
    at Object../node_modules/grpc/node_modules/node-pre-gyp/lib/pre-binding.js.exports.find (/home/de-10/VS Code Workspace/oms-v3/dist/server/main.js:226508:15)
.
.
.
npm ERR! universal-ssr@0.0.0 staging: `npm run build:ssr-staging && npm run serve:ssr`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the universal-ssr@0.0.0 staging script.

package.json :

{
  "scripts": {
    "staging": "npm run build:ssr-staging && npm run serve:ssr",
    "build:ssr-staging": "npm run build:client-and-server-bundles-staging && npm run webpack:server",
    "serve:ssr": "node dist/server.js",
    "build:client-and-server-bundles-staging": "ng build --c=staging --build-optimizer=true --stats-json  && ng run universal-ssr:server --bundleDependencies all"
  }
}

One of the workaround was to remove --bundleDependencies all or replace it with --bundleDependencies none but that doesn't work for me. It does successfully build though but when I move the dist folder and execute node dist/server.js the following error shows up:

internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module '@angular/core'
Require stack:
- /home/de-10/Desktop/dist/server/main.js
- /home/de-10/Desktop/dist/server.js
.
.
.
at __webpack_require__ (/home/de-10/Desktop/dist/server/main.js:20:30) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/de-10/Desktop/dist/server/main.js',
    '/home/de-10/Desktop/dist/server.js'
  ]
}

I also tried installing grpc and @grpc/proto-loader as someone suggested but nope, it doesn't work.

Another workaround was to add a set of packages to angular.json > architect.server.options:

"externalDependencies": [
   "grpc",
   "@grpc/proto-loader",
   "@angular/fire/firestore",
   "firebase/firestore"
]

So when I try to do that, I get:

Property externalDependencies is not allowed.

Thanks in advance!

0 Answers
Related