Angular 6 SSR build issue #1705

ggarg2 · 2018-06-03T21:34:30Z

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:\dev\migration\dist\server.js:206291:73)
at E:\dev\migration\dist\server.js:210811:95
at ZoneDelegate.invoke (E:\dev\migration\dist\server.js:527:26)
at Zone.run (E:\dev\migration\dist\server.js:277:43)
at NgZone.runOutsideAngular (E:\dev\migration\dist\server.js:7898:28)
at new AngularFireAuth (E:\dev\migration\dist\server.js:210810:26)
at _createClass (E:\dev\migration\dist\server.js:13149:20)
at _createProviderInstance$1 (E:\dev\migration\dist\server.js:13111:26)
at resolveNgModuleDep (E:\dev\migration\dist\server.js:13077:21)
at _createClass (E:\dev\migration\dist\server.js:13143:107)

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

diegotham · 2018-06-04T12:20:13Z

I'm having the same issue with version angularfire2@5.0.0-rc.10, 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 · 2018-06-04T21:56:44Z

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

ericel · 2018-06-10T01:02:17Z

Any solution to this yet?

rogervanwile · 2018-06-10T20:26:17Z

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

$ npm install angularfire2@5.0.0-rc.9 --save

ericel · 2018-06-11T11:04:06Z

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 · 2018-06-20T17:52:21Z

Fixed in rc.11

gayankalhara · 2018-06-21T20:16:31Z

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 · 2018-06-21T20:16:41Z

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

JancoBH · 2018-06-21T20:46:50Z

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

jwuliger · 2018-06-21T23:58:51Z

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 · 2018-06-25T03:47:25Z

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 · 2018-06-25T04:38:49Z

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

jwuliger · 2018-06-25T05:00:51Z

@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 · 2018-07-01T22:45:01Z

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 · 2018-07-03T14:51:18Z

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

anasbaddyr · 2018-07-03T17:59:34Z

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

ychoksi · 2018-07-04T06:47:47Z

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

jwuliger · 2018-07-05T22:21:14Z

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 · 2018-07-06T01:31:35Z

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 · 2018-07-08T19:48:08Z

@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 · 2018-07-09T11:34:01Z

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 · 2018-07-09T11:44:13Z

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 · 2018-07-09T11:53:53Z

@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!

ValentinFunk · 2018-07-10T18:10:50Z

@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 · 2018-07-17T04:29:08Z

**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 · 2018-07-19T04:53:51Z

@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 · 2018-07-26T22:07:58Z

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

> togaimperial@0.0.0 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! togaimperial@0.0.0 generate:prerender: `cd dist && node prerender`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the togaimperial@0.0.0 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 · 2018-07-29T00:28:50Z

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 · 2018-07-29T02:59:06Z

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

gfaganli · 2018-08-08T08:10:28Z

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 · 2018-08-08T09:34:44Z

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

gfaganli · 2018-08-08T14:08:23Z

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 · 2018-08-13T19:54:24Z

Same problem here...

philip-firstorder · 2018-08-14T09:55:31Z

@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 · 2018-08-17T22:08:07Z

Fixing the apps/filter issue in #1821

itsthesteve · 2018-08-24T22:02:59Z

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 · 2018-09-07T11:03:11Z

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);
}

ValentinFunk · 2018-09-07T12:24:08Z

@gfaganli

Check these and see if it solves your issue:

gfaganli · 2018-09-07T13:32:36Z

@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.

jamesdaniels mentioned this issue Jun 13, 2018

chore(): lean only on firebase types and compatibility with 5.0.4 #1729

Merged

jamesdaniels closed this as completed Jun 20, 2018

jwuliger mentioned this issue Jul 20, 2018

Firebase Cloud Functions & AngularFire - Dynamic SSR Broken jwuliger/personal-website#1

Open

Konondo mentioned this issue Jul 20, 2018

Firebase / AngularFire related error when loading maciejtreder/ng-toolkit#380

Closed

8 tasks

itsthesteve mentioned this issue Aug 13, 2018

The XMLHttpRequest compatibility library was not found. #1766

Closed

Angular 6 SSR build issue #1705

Angular 6 SSR build issue #1705

Comments

ggarg2 commented Jun 3, 2018

diegotham commented Jun 4, 2018

jamesdaniels commented Jun 4, 2018

ericel commented Jun 10, 2018

rogervanwile commented Jun 10, 2018

ericel commented Jun 11, 2018 • edited Loading

jamesdaniels commented Jun 20, 2018

gayankalhara commented Jun 21, 2018

bfan1256 commented Jun 21, 2018 • edited Loading

JancoBH commented Jun 21, 2018

jwuliger commented Jun 21, 2018

jwuliger commented Jun 25, 2018

gayankalhara commented Jun 25, 2018

jwuliger commented Jun 25, 2018

anasbaddyr commented Jul 1, 2018 • edited Loading

yugank1991 commented Jul 3, 2018

anasbaddyr commented Jul 3, 2018

ychoksi commented Jul 4, 2018

jwuliger commented Jul 5, 2018 • edited Loading

jwuliger commented Jul 6, 2018

alexdabast commented Jul 8, 2018

jwuliger commented Jul 9, 2018

alexdabast commented Jul 9, 2018

jwuliger commented Jul 9, 2018

ValentinFunk commented Jul 10, 2018

umeshblader3 commented Jul 17, 2018

philip-firstorder commented Jul 19, 2018

philip-firstorder commented Jul 26, 2018 • edited Loading

philip-firstorder commented Jul 29, 2018 • edited Loading

olsnacky commented Jul 29, 2018

gfaganli commented Aug 8, 2018 • edited Loading

RudiPersson commented Aug 8, 2018

gfaganli commented Aug 8, 2018

BluebambooSRL commented Aug 13, 2018

philip-firstorder commented Aug 14, 2018

jamesdaniels commented Aug 17, 2018

itsthesteve commented Aug 24, 2018

gfaganli commented Sep 7, 2018

ValentinFunk commented Sep 7, 2018

gfaganli commented Sep 7, 2018

ericel commented Jun 11, 2018 •

edited

Loading

bfan1256 commented Jun 21, 2018 •

edited

Loading

anasbaddyr commented Jul 1, 2018 •

edited

Loading

jwuliger commented Jul 5, 2018 •

edited

Loading

philip-firstorder commented Jul 26, 2018 •

edited

Loading

philip-firstorder commented Jul 29, 2018 •

edited

Loading

gfaganli commented Aug 8, 2018 •

edited

Loading