Angularfire: Angular 6 SSR build issue

[ggarg2]

Hi Team,

I am new in AngularFire2 library. I am getting one issue while making ssr build only. If i am running ng run build:ssr then i am getting some warnings.

WARNING in ./node_modules/angularfire2/firebase.app.module.js
15:22-26 "export 'apps' was not found in 'firebase/app'
@ ./node_modules/angularfire2/firebase.app.module.js
@ ./node_modules/angularfire2/public_api.js
@ ./node_modules/angularfire2/index.js
@ ./dist/server/main.js
@ ./server.ts

WARNING in ./node_modules/angularfire2/firebase.app.module.js
16:27-40 "export 'initializeApp' was not found in 'firebase/app'
@ ./node_modules/angularfire2/firebase.app.module.js
@ ./node_modules/angularfire2/public_api.js
@ ./node_modules/angularfire2/index.js
@ ./dist/server/main.js
@ ./server.ts

But after running npm run serve:ssr, i am getting this error

TypeError: Cannot read property 'filter' of undefined
at _firebaseAppFactory (E:devmigrationdistserver.js:206291:73)
at E:devmigrationdistserver.js:210811:95
at ZoneDelegate.invoke (E:devmigrationdistserver.js:527:26)
at Zone.run (E:devmigrationdistserver.js:277:43)
at NgZone.runOutsideAngular (E:devmigrationdistserver.js:7898:28)
at new AngularFireAuth (E:devmigrationdistserver.js:210810:26)
at _createClass (E:devmigrationdistserver.js:13149:20)
at _createProviderInstance$1 (E:devmigrationdistserver.js:13111:26)
at resolveNgModuleDep (E:devmigrationdistserver.js:13077:21)
at _createClass (E:devmigrationdistserver.js:13143:107)

Because of this error i am unable to migrate from Angular 5 to Angular 6. Please help

[diegotham]

I'm having the same issue with version [email protected], if you use 5.0.0-rc.9 it does not happen (same firebase version "firebase": "^5.0.4" for both cases).
The affected line is the one with "var existingApp":

function _firebaseAppFactory(options, nameOrConfig) { var name = typeof nameOrConfig === 'string' && nameOrConfig || '[DEFAULT]'; var config = typeof nameOrConfig === 'object' && nameOrConfig || {}; config.name = config.name || name; var existingApp = firebase_app__WEBPACK_IMPORTED_MODULE_1__["apps"].filter(function (app) { return app && app.name === config.name; })[0]; return (existingApp || Object(firebase_app__WEBPACK_IMPORTED_MODULE_1__["initializeApp"])(options, config)); }

Doing a console.log of "firebase_app__WEBPACK_IMPORTED_MODULE_1__" shows:

firebase_app__WEBPACK_IMPORTED_MODULE_1__ { default: { __esModule: true, initializeApp: [Function: initializeApp], app: { [Function: app] App: [Function: FirebaseAppImpl] }, apps: [Getter], Promise: ....

[jamesdaniels]

I'll check on this + put in an SSR test to make sure we don't regress in future releases.

[ericel]

Any solution to this yet?

[rogervanwile]

@ericel As a workaround you can use version 5.0.0-rc.9

$ npm install [email protected] --save

[ericel]

I am actually using that! But am still getting the error.

Unhandled Promise rejection: Cannot read property 'filter' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'filter' of undefined
    at _firebaseAppFactory (webpack:///./node_modules/angularfire2/firebase.app.module.js?:23:73)
    at eval (webpack:///./node_modules/angularfire2/firestore/firestore.js?:33:95)
    at ZoneDelegate.invoke (webpack:///./node_modules/zone.js/dist/zone-node.js?:387:26)
    at Zone.run (webpack:///./node_modules/zone.js/dist/zone-node.js?:137:43)
    at NgZone.runOutsideAngular (webpack:///./node_modules/@angular/core/fesm5/core.js?:3902:28)
    at new AngularFirestore (webpack:///./node_modules/angularfire2/firestore/firestore.js?:32:31)
    at _createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:8398:20)
    at _createProviderInstance$1 (webpack:///./node_modules/@angular/core/fesm5/core.js?:8360:26)
    at initNgModule (webpack:///./node_modules/@angular/core/fesm5/core.js?:8296:32)
    at new NgModuleRef_ (webpack:///./node_modules/@angular/core/fesm5/core.js?:9019:9) TypeError: Cannot read property 'filter' of undefined
    at _firebaseAppFactory (webpack:///./node_modules/angularfire2/firebase.app.module.js?:23:73)
    at eval (webpack:///./node_modules/angularfire2/firestore/firestore.js?:33:95)
    at ZoneDelegate.invoke (webpack:///./node_modules/zone.js/dist/zone-node.js?:387:26)
    at Zone.run (webpack:///./node_modules/zone.js/dist/zone-node.js?:137:43)
    at NgZone.runOutsideAngular (webpack:///./node_modules/@angular/core/fesm5/core.js?:3902:28)
    at new AngularFirestore (webpack:///./node_modules/angularfire2/firestore/firestore.js?:32:31)
    at _createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:8398:20)
    at _createProviderInstance$1 (webpack:///./node_modules/@angular/core/fesm5/core.js?:8360:26)
    at initNgModule (webpack:///./node_modules/@angular/core/fesm5/core.js?:8296:32)
    at new NgModuleRef_ (webpack:///./node_modules/@angular/core/fesm5/core.js?:9019:9)

[jamesdaniels]

Fixed in rc.11

[gayankalhara]

Same here. I still get this issue.

function _firebaseAppFactory(options, nameOrConfig) { var name = typeof nameOrConfig === 'string' && nameOrConfig || '[DEFAULT]'; var config = typeof nameOrConfig === 'object' && nameOrConfig || {}; config.name = config.name || name; var existingApp = firebase_app__WEBPACK_IMPORTED_MODULE_1__["apps"].filter(function (app) { return app && app.name === config.name; })[0]; return (existingApp || Object(firebase_app__WEBPACK_IMPORTED_MODULE_1__["initializeApp"])(options, config));

[bfan1256]

I am still getting this error. @jamesdaniels. But it is working for me in rc.9

[JancoBH]

I'm still getting the TypeError: Cannot read property 'filter' of undefined error @jamesdaniels :(

[jwuliger]

Hello, I am now getting the error myself when I try to build my ssr prerender using @angular/universal with the latest version of AF2. Funny enough it has been working all day. I just updated all my node modules. I usually do this every 4 - 6 hours. Not sure if that has anything to do with it.

Here is the complete and boring console log of the error step by step:
console_error_log.txt

Thanks!

[jwuliger]

Why was this closed? This is still an occurring issue in RC.11. Using my own node server I still get this error. Any help or direction to a workaround or anything would be greatly appreciated. Thanks!

[gayankalhara]

@jwuliger Can you try removing package-lock.json and running npm install again?

[jwuliger]

@gayankalhara Hello! Thanks for your reply. Yes, I have done that several times. I have tried Yarn and NPM, clearing cache and all that fun stuff. Just when I think I have found the issue, it reveals itself again in a different form. This must be something I am not configuring correctly. However I have done this several time before without issue. If I share my repo, would you be willing to take a peak? It not no worries! Thanks!

[anasbaddyr]

Using rc.11 i went to node_modules/angularfire2/firebase.app.module.js
I changed
import * as firebase from 'firebase/app';
to
import firebase from 'firebase/app';
I´m not sure how much of a fix this is but there seems to be a reference error to firebase/app.
This fixed the issue for me and prerendering works again.

[yugank1991]

it is not working yet..Anyone has a solution of it ?

[anasbaddyr]

@yugank1991 did you try the solution i posted above? Seems to have solved the issue for me.

[ychoksi]

@anasbaddyr
I have tried with import firebase from 'firebase/app';
but it is giving error related to export

[jwuliger]

I have tried everything as well. All suggestions including the one from @yugank1991. Prerendering and SSR does not work with Firebase Hosting/Cloud Functions. I can't speak for anyone else but I am also not able to get it to work on my workstation using a simple NodeJS Server. I don't understand why this issue was closed as many people are having problems with it. Is there something that I am missing here? Is there a specific combination of pack
age versions I should be using? Very eagerly awaiting for a solution to use either complete server-side rendering and or prerendering. Seems all other Frameworks and stacks do not have this issue. Please let me know if there is anything I can do. Thank you so much.

[jwuliger]

Update -

Found the issue for me. @yugank1991 Your solution was what led me to find out that I needed to add an additional import.

Instead of:

import * as firebase from 'firebase/app';

I changed the imports to:

import { firebase } from '@firebase/app';
import 'firebase/app';

Now I can run SSR on any Node server. I am still in the process of testing the firebase function for hosting. If you would like to see this working in real-time check out my Repo here:

https://github.com/jwuliger/personal-website

[alexdabast]

@jwuliger unfortunately this is not working for me.
Could you confirm the npm package that you are using and why do you need to import firebase that way ? to use messaging ?

Thanks

[jwuliger]

Hello @alexdabast Judging from what is working for others in this issue, my best guess is that it must be environment/package related.

I am not currently using Firebase Messaging. My issue was using Firebase with AngularFire2 in dynamic SSR and/or generative prerendering with Angular Universal.

My environment is:

Angular CLI: 6.1.0-beta.0
Node: 8.11.3
OS: win32 x64

Also from my last comment, you can pull the app I am working on in question from my public repository here: https://github.com/jwuliger/personal-website

As for why I need to import Firebase that way into AngularFire2 - well not 100% sure. My best guess is all the typing changes in vanilla Firebase. My work-around to patch AngularFire2 came from how the lib angularfire-lite was importing Firebase; as this lib did work with SSR.

There is an Angular v6 Branch you can check out here that also includes Firebase Messaging: https://github.com/hamedbaatour/angularfire-lite/tree/v6.0

I hope that this helps and be sure to checkout my repo to see AngularFire2 & Angular Universal working.

Next goal is to be able to run my node server from a cloud function whenever they fix that.

Thanks

[alexdabast]

Thank you I made it work by downgrading to angularfire2 to rc9 so for me I think there is still something wrong in the rc10/11 release

[jwuliger]

@alexdabast Yes, that was another solution. I wanted to use the latest RC.11 build though. I am glad you have everything squared away now!

[Kamshak]

@jamesdaniels i'm getting this error with rc.11 as well any chance you could look into it again? See above for others with the same issue

[umeshblader3]

*Still the error comes in 5.0.0-rc.11 *
ERROR TypeError: Cannot read property 'filter' of undefined
at _firebaseAppFactory (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:58665:41)
at /Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:98786:66
at ZoneDelegate.module.exports.ZoneDelegate.invoke (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:156663:26)
at Zone.module.exports.Zone.run (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:156413:43)
at NgZone.module.exports.NgZone.runOutsideAngular (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:4071:28)
at new AngularFirestore (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:98785:31)
at _createClass (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:8568:20)
at _createProviderInstance (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:8530:26)
at resolveNgModuleDep (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:8493:21)
at _createClass (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:8562:29)
TypeError: Cannot read property 'filter' of undefined
at _firebaseAppFactory (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:58665:41)
at /Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:98786:66
at ZoneDelegate.module.exports.ZoneDelegate.invoke (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:156663:26)
at Zone.module.exports.Zone.run (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:156413:43)
at NgZone.module.exports.NgZone.runOutsideAngular (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:4071:28)
at new AngularFirestore (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:98785:31)
at _createClass (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:8568:20)
at _createProviderInstance (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:8530:26)
at resolveNgModuleDep (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:8493:21)
at _createClass (/Users/umeshblader/Projects/front-end/ecosoftlk-new/dist/server.js:8562

[philip-firstorder]

@jamesdaniels
Still error, I think this should be reopened
"angularfire2": "^5.0.0-rc.11",
"firebase": "^5.2.0",
"@angular": "^6.0.7",
"@nguniversal": "^6.0.0",

ERROR { Error: Uncaught (in promise): TypeError: Cannot read property 'filter' of undefined
TypeError: Cannot read property 'filter' of undefined
    at _firebaseAppFactory (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:165705:73)
    at /Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:170755:95
    at ZoneDelegate.invoke (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:463:26)
    at Zone.run (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:213:43)

[philip-firstorder]

Fixed it with "angularfire2": "^5.0.0-rc.9", but then I got this error from my prerenderer

> [email protected] generate:prerender /Users/philip_sultanescu/Projects/togaimperial.com
> cd dist && node prerender

/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:282
                        throw error;
                        ^

ReferenceError: XMLHttpRequest is not defined
    at Qc (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:194013:1401)
    at T.g.fa (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:194043:234)
    at Xc (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:194015:266)
    at Vc (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:194014:297)
    at ye.g.Qa (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:194057:22)
    at Timeout.<anonymous> (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:194013:802)
    at ZoneDelegate.invokeTask (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:511:31)
    at Zone.runTask (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:278:47)
    at ZoneTask.invokeTask (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:586:34)
    at Timeout.ZoneTask.invoke (/Users/philip_sultanescu/Projects/togaimperial.com/dist/prerender.js:575:48)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] generate:prerender: `cd dist && node prerender`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] generate:prerender script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I fixed this by adding these 2 lines from server.ts also in prerender.ts

// Required for Firebase
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

[philip-firstorder]

Also important is to call process.exit(); at the end of prerender.ts file in care you use firebase or firestore, otherwise the cd dist && node prerender will just wait forever because of the persistent db connections.

For prerendering with firebase there is a great article here:
https://angularfirebase.com/lessons/angular-6-universal-ssr-prerendering-firebase-hosting/#Prerendering-vs-Server-Side-Rendering-vs-Rendertron

[olsnacky]

I get this error using rc9 and rx11! I fixed it by using @jwuliger's fix.

[gfaganli]

so what is the last decision? which versions of angularfire and firebase solves problem? or how to import firebase? still i got the error
"firebase": "^5.0.4",
"angularfire2": "^5.0.0-rc.11",
"@angular/compiler": "^5.0.0",

TypeError: Cannot read property 'filter' of undefined at _firebaseAppFactory

[RudiPersson]

Got everything to work using:
"firebase": "^5.3.0",
"angularfire2": "^5.0.0-rc.9"

[gfaganli]

still not working, now error switched to that one -_- :
Error: The XMLHttpRequest compatibility library was not found.

i followed @philip-firstorder but again not working
// Required for Firebase
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

after all -
Error: Unable to Instantiate Firebase Messaing ReferenceError: self is not defined

p.s ng serve works fine, SSR not working

[BluebambooSRL]

Same problem here...

[philip-firstorder]

@gfaganli Here is my project for you to do a side-by-side comparison with yours, maybe it helps. Mine compiles for ssr, prerender, serve, everything...

https://github.com/firstorder-gmbh/firstorder.io

[jamesdaniels]

Fixing the apps/filter issue in #1821

[itsthesteve]

Thanks @jamesdaniels! Universal doesn't throw that error with rc12 anymore. The XMLHttpRequest fix mentioned by @philip-firstorder is still required which is simple enough.

[gfaganli]

Is latest version compatible with angular 5? I am using firebase in 2 project, one app is in the angular 5, another angular 6. Angular 6 works fine with "angularfire2": "^5.0.0-rc.12", "firebase": "^5.4.1". But in angular 5 it throws an error like -
Unable to Instantiate Firebase Messaing TypeError: C.messaging is not a function
Error comes from line in the below, but could not find any solution

try {
this.messaging = firebase.messaging();
} catch (e) {
console.log('Unable to Instantiate Firebase Messaing', e);
}

[Kamshak]

@gfaganli

Check these and see if it solves your issue:

• https://github.com/angular/angularfire2/issues/1707#issuecomment-414947706
• https://github.com/angular/angularfire2/issues/1707#issuecomment-415001581

[gfaganli]

@Kamshak Thanks for your help.
I tried first one bit that did not work.
In order to try second solution i have to upgrade project to angular 6, which i would not prefer.