Angular Firebase Error: ENOENT: no such file or directory, open 'google/protobuf/api.proto'

[francdore]

Version info

Angular:
8.2.14

Firebase:

= 5.5.7 <8 (This is in my package.json) Came with installation.

AngularFire:
5.4.2

Problem
I'm getting this error with Angular, Firebase and ngUniversal. Everything works fine when I run ng serve. But when I run npm run build:ssr it builds with no errors. Then when I run npm run serve:ssr I get the error below:

C:\Users\user\Documents\app\dist\server\main.js:38890
     throw err;
            ^
Error: ENOENT: no such file or directory, open 'google/protobuf/api.proto'

Steps to set up and reproduce
I installed a fresh Angular app ng new appName --routing, then I installed ngUniversal using ng add @nguniversal/express-engine --clientProject=appName.

So I'm running npm run build:ssr && npm run serve:ssr. It fails on the serve script with the error above.

[dannymorales]

I have created several angular app in order to fix this issue in multiple ways, but I have not been able to fix it.
I believe this issue is the same as #2320
I followed the recommendation and added "@firebase/firestore" to externalDependencies.

"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/gadaproductions/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json",
"bundleDependencies": false,
"externalDependencies": [
"@firebase/firestore"
]
},

This solves the issue on the local server when you run dev:ssr. The issue continues when I try to deploy to Firebase.
We get error: Functions did not deploy properly.
When I check the log in Firebase functions it shows:
Error: Cannot find module '@firebase/firestore'
Even installing @firebase/firestore', it does not work.
The app works great until you add firestore. That is what breaks the app.

[jdgamble555]

go to your functions directory then npm i firebase

[francdore]

I resolved this issue by downgrading to "@angular/fire": "^5.2.1",.

But now I'm having a different issue. When I run npm run serve:ssr, the app doesn't want to load. But when I comment out my lazy routes, the app works when I serve it. The routes works fine on ng serve but not npm run build:ssr && npm run serve:ssr?

Not sure what the problem is.

[dannymorales]

jdgamble555. There is no functions directory anymore when you ng deploy using @angular/fire. I could deploy the app without firestore. Once I add firestore, that's it, firebase does not accept it.

[rdawoud]

when using ng add @angular/fire , no function folder is there , i got the same error when i deploy

[jdgamble555]

You have a functions folder if you use firebase functions. I think they have not yet fixed a lot of the issues there. I believe they need to add it to node_modules/angular/fire/schematics/deploy/schema.json, The only work-around I know is to initialize firebase functions, add "@firebase/firestore to functions/package.json, and firebase deploy --only functions Then ng deploy to overwrite the ssr function... You may have to change firebase.json.functions.source = "" from firebase.json.functions.source = "dist/${your project$} Maybe there is a simpler fix... I have mentioned all of this in another support request, but it looks like they just fixed one of the 5 problems I mentioned to be updated in the next merge...

[hiepxanh]

my answer here #2320 (comment)
please upvote the PR here #2372

[chege-kimaru]

I have created several angular app in order to fix this issue in multiple ways, but I have not been able to fix it.
I believe this issue is the same as #2320
I followed the recommendation and added "@firebase/firestore" to externalDependencies.

"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/gadaproductions/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json",
"bundleDependencies": false,
"externalDependencies": [
"@firebase/firestore"
]
},

This solves the issue on the local server when you run dev:ssr. The issue continues when I try to deploy to Firebase.
We get error: Functions did not deploy properly.
When I check the log in Firebase functions it shows:
Error: Cannot find module '@firebase/firestore'
Even installing @firebase/firestore', it does not work.
The app works great until you add firestore. That is what breaks the app.

I was able to solve this as follows. First as you've mentioned add @firebase/firestore in externalDependencies. On running firebase deploy of cos I get the error Error: Cannot find module '@firebase/firestore' just as you've mentioned above. To get rid of this error i navigated to my functions directory and ran npm i @firebase/app @firebase/firestore.

The app was deployed successfully.

[YeongCheon]

i use angular 10.
i got a same problem.
i solved problem. this is part of my angular.json file. add @firebase/firestore in server.options.externalDependencies

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/APP_NAME/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "externalDependencies": [
              "@firebase/firestore"
            ]
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            }
          },
        },

[jamesdaniels]

Work-around available & added to our schematics. Might not be needed with newer versions of Firebase now, will investigate. Closing.