Description
Version info
Angular: 9.0.0-rc.7
Firebase: 7.6.1
AngularFire: 5.3.0-rc.4
Other (e.g. Ionic/Cordova, Node, browser, operating system):
node v12.3.1
How to reproduce these conditions
Try to compile and run an Angular Universal app that has a dependency on @angular/fire/firestore
. It won't even compile unless you run the ngcc
.
If you run ngcc
, though, then you will get an error when you run your server like this:
/Users/jeffwhelpley/repos/criticly/frontend/dist/apps/criticly/server/main.js:92536
AngularFirestore.ɵprov = ɵngcc0.ɵɵdefineInjectable({ token: AngularFirestore, factory: function (t) { return AngularFirestore.ɵfac(t); } });
^
TypeError: ɵngcc0.ɵɵdefineInjectable is not a function
at /Users/jeffwhelpley/repos/criticly/frontend/dist/apps/criticly/server/main.js:92536:33
at /Users/jeffwhelpley/repos/criticly/frontend/dist/apps/criticly/server/main.js:92567:6
at /Users/jeffwhelpley/repos/criticly/frontend/dist/apps/criticly/server/main.js:92235:13
at Object.../../node_modules/@angular/fire/bundles/firestore.umd.js (/Users/jeffwhelpley/repos/criticly/frontend/dist/apps/criticly/server/main.js:92237:2)
at __webpack_require__ (/Users/jeffwhelpley/repos/criticly/frontend/dist/apps/criticly/server/main.js:20:30)
When I look at the UMD that is generated for Firestore by ngcc, I see this at the beginning:
(function (global, factory) {
true ? factory(exports, __webpack_require__(/*! rxjs */ "../../node_modules/rxjs/index.js"), __webpack_require__(/*! rxjs/operators */ "../../node_modules/rxjs/operators/index.js"), __webpack_require__(/*! @angular/fire */ "../../node_modules/@angular/fire/bundles/core.umd.js"), __webpack_require__(/*! @angular/core */ "../../node_modules/@angular/core/bundles/core.umd.js"), __webpack_require__(/*! @angular/common */ "../../node_modules/@angular/common/bundles/common.umd.js"), __webpack_require__(/*! firebase/app */ "../../node_modules/firebase/app/dist/index.cjs.js"), __webpack_require__(/*! firebase/firestore */ "../../node_modules/firebase/firestore/dist/index.cjs.js"),__webpack_require__(/*! @angular/core */ "../../node_modules/@angular/core/bundles/core.umd.js")) :
undefined;
}(this, (function (exports,rxjs,operators,fire,core,common,firebase,ɵngcc0) { 'use strict';
I was debugging this code for awhile to try and figure out what is going on until I realized that the call to the factory()
function is sending in more input params (9) than there is actually in the function definition (8). he function has exports,rxjs,operators,fire,core,common,firebase,ɵngcc0
which is 8 params, but here is what the factory is sending in:
1. exports
2. __webpack_require__(/*! rxjs */ "../../node_modules/rxjs/index.js")
3. __webpack_require__( "../../node_modules/rxjs/operators/index.js")
4. __webpack_require__( "../../node_modules/@angular/fire/bundles/core.umd.js")
5. __webpack_require__( "../../node_modules/@angular/core/bundles/core.umd.js")
6. __webpack_require__("../../node_modules/@angular/common/bundles/common.umd.js")
7. __webpack_require__("../../node_modules/firebase/app/dist/index.cjs.js")
8. __webpack_require__("../../node_modules/firebase/firestore/dist/index.cjs.js")
9. __webpack_require__(/*! @angular/core */ "../../node_modules/@angular/core/bundles/core.umd.js")
When you look at the original UMD for Firestore, this starts to make sense because you can see there is an extra param there as well:
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/fire'), require('@angular/core'), require('@angular/common'), require('firebase/app'), require('firebase/firestore')) :
typeof define === 'function' && define.amd ? define(['exports', 'rxjs', 'rxjs/operators', '@angular/fire', '@angular/core', '@angular/common', 'firebase/app', 'firebase/firestore'], factory) :
(factory((global.angularfire2 = global.angularfire2 || {}, global.angularfire2.firestore = {}),global.rxjs,global.rxjs.operators,global.angularfire2,global.ng.core,global.ng.common,global.firebase));
}(this, (function (exports,rxjs,operators,fire,core,common,firebase) { 'use strict';
You can see here that require('firebase/firestore')
is at the end of the factory()
call, but there is no param for that. So, in the original UMD there is no harm because that extra param isn't used. But, ngcc
must be adding an extra param without checking for this.
So, I believe at least part of the fix is figuring out why the normal Firestore UMD has that references to /firebase/firestore
even though it is not being used.
Steps to set up and reproduce
- Set up basic Angular Universal app with Angular v9 similar to this setup
- In your
package.json
scripts section make sure you have"postinstall": "ngcc"
- In your
angular.json
server options section make sure you have"bundleDependencies": true
and addexternalDependencies
there for any native dependencies - Build your browser package
- Build your server package
- Run the server package
Sample data and security rules
N/A
Debug output
** Errors in the JavaScript console **
N/A
** Output from firebase.database().enableLogging(true);
**
N/A
** Screenshots **
N/A
Expected behavior
To not error out
Actual behavior
Get errors listed above.