Error: Cannot find module '@firebase/app' for Angular + SSR app using AngularFire 6.0.0

[saurabh1234]

When using Angular SSR + Angular fire auth module the ng deploy is failing on firebase function deployment side. Local (ng serve) works fine . If you remove AngularFireAuthModule then the deployment is fine.

I believe it has been reported in this https://github.com/firebase/firebase-js-sdk/issues/1250#issuecomment-445382554 but not sure how to get it resolve it in 6.0.0 angularfire

Version info

Angular: "@angular/core": "9.1.4",

Firebase: "firebase": "^7.14.2",

AngularFire: "@angular/fire": "^6.0.0",

Steps to set up and reproduce

Create a fresh angular project. Use the following package.json and run ng deploy. Don't forget to configure firebase account.

{
  "name": "web-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run web-app:serve-ssr",
    "serve:ssr": "node dist/web-app/server/main.js",
    "build:ssr": "ng build --prod && ng run web-app:server:production",
    "prerender": "ng run web-app:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "9.1.4",
    "@angular/cdk": "9.2.2",
    "@angular/common": "9.1.4",
    "@angular/compiler": "9.1.4",
    "@angular/core": "9.1.4",
    "@angular/fire": "^6.0.0",
    "@angular/flex-layout": "9.0.0-beta.29",
    "@angular/forms": "9.1.4",
    "@angular/localize": "9.1.4",
    "@angular/material": "9.2.2",
    "@angular/platform-browser": "9.1.4",
    "@angular/platform-browser-dynamic": "9.1.4",
    "@angular/platform-server": "9.1.4",
    "@angular/router": "9.1.4",
    "@ng-toolkit/universal": "^8.1.0",
    "@nguniversal/express-engine": "9.1.0",
    "express": "4.17.1",
    "firebase": "^7.14.2",
    "rxjs": "6.5.5",
    "tslib": "1.11.1",
    "zone.js": "0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "0.901.4",
    "@angular-devkit/build-angular": "0.901.4",
    "@angular/cli": "9.1.4",
    "@angular/compiler-cli": "9.1.4",
    "@angular/language-service": "9.1.4",
    "@nguniversal/builders": "9.1.0",
    "@types/express": "4.17.6",
    "@types/jasmine": "3.5.10",
    "@types/jasminewd2": "2.0.8",
    "@types/node": "13.13.4",
    "codelyzer": "5.2.2",
    "firebase-admin": "8.11.0",
    "firebase-functions": "3.6.1",
    "firebase-functions-test": "0.2.1",
    "firebase-tools": "8.2.0",
    "fuzzy": "0.1.3",
    "inquirer": "7.1.0",
    "inquirer-autocomplete-prompt": "1.0.2",
    "jasmine-core": "3.5.0",
    "jasmine-spec-reporter": "5.0.2",
    "karma": "5.0.4",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "3.0.0",
    "karma-jasmine": "3.1.1",
    "karma-jasmine-html-reporter": "1.5.3",
    "protractor": "5.4.4",
    "ts-node": "8.9.1",
    "tslint": "6.1.2",
    "typescript": "~3.8.3"
  }
}

Use the following module

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
    AngularFireStorageModule, // imports firebase/storage only needed for storage features
  ],
  exports: [
    AngularFireModule,
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
  ],
  providers: [],
})
export class FirebaseModule {}

Adding AngularFireAuthModule breaks the deployment. Remove it and deploy will be okay.

run ng deploy ( launched with 6.0.0 angular fire . Defined here https://github.com/angular/angularfire/blob/master/docs/deploy/getting-started.md

Sample data and security rules

Debug output

Firebase function logs

ssr Detailed stack trace: Error: Cannot find module '@firebase/app'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous>(/workspace/node_modules/@firebase/firestore/dist/index.node.cjs.js:8:32)

Expected behavior

Deployment should work fine.

Actual behavior

Deployment failing during app deployment in firebase functions

[levonka]

Hi, do you solve this issue or found a workaround?

[saurabh1234]

@levonka No Sir. Waiting from angular fire dev side to comment. :)

[levonka]

I have a similar problem, but deploy breaks when I add AngularFirestoreModule

[davidalvarezdlt]

The problem is that the deployment pipeline generates a new package.json file inside the distribution folder, but it doesn't contain @firebase/app. The only workaround that I've found is to write it manually.

[saurabh1234]

Any ideas when this will be fixed or if the team is already fixing this ?

[dkgof]

I am having the exact same problem, missing @firebase/app from package.json inside the created dist. When running ng deploy

[yasinkocak]

Just add @firebase/app in angular.json then will added in new generated package.json

Like this:

"options": {
    ....
    "externalDependencies": [
        "@firebase/firestore",
        "@firebase/app"
    ]
}

[davidalvarezdlt]

Just add @firebase/app in angular.json then will added in new generated package.json

Like this:

"options": {
    ....
    "externalDependencies": [
        "@firebase/firestore",
        "@firebase/app"
    ]
}

I've already tried that, setting the externalDependencies option in both deploy and server. It doesn't work, at least in my case.

[yasinkocak]

i have only added @firebase/app in server and it's worked for me.

@firebase/firestore is automaticaly added by schematics

[jamesdaniels]

Externals should be handled by our schematics appropriately now.