Angularfire: buildOptimizer producing error in production build

[markgoho]

Version info

Angular: 7.0.2

Firebase: 5.5.7

AngularFire: 5.1.0

How to reproduce these conditions

Steps to set up and reproduce

Use AngularFire, turn on buildOptimizer

Debug output

Uncaught Error: StaticInjectorError(o)[class{constructor(t,e,n,r,s,a,u){this.scheduler=new p.e(a,s),this.firestore=a.runOutsideAngular(()=>{const n=Object(p.f)(t,e).firestore();return n.settings(r||_),n}),this.persistenceEnabled$=n&&Object(y.p)(s)?a.runOutsideAngular(()=>{try{return Object(i.a)(this.firestore.enablePersistence(u).then(()=>!0,()=>!1))}catch(t){return Object(o.a)(!1)}}):Object(o.a)(!1)}collection(t,e){let n;n="string"==typeof t?this.firestore.collection(t):t;const{ref:r,query:i}=S(n,e);return new g(r,i,this)}doc(t){let e;return e="string"==typeof t?this.firestore.doc(t):t,new m(e,this)}createId(){return this.firestore.collection("_").doc().id}}]: 
  StaticInjectorError(Platform: core)[class{constructor(t,e,n,r,s,a,u){this.scheduler=new p.e(a,s),this.firestore=a.runOutsideAngular(()=>{const n=Object(p.f)(t,e).firestore();return n.settings(r||_),n}),this.persistenceEnabled$=n&&Object(y.p)(s)?a.runOutsideAngular(()=>{try{return Object(i.a)(this.firestore.enablePersistence(u).then(()=>!0,()=>!1))}catch(t){return Object(o.a)(!1)}}):Object(o.a)(!1)}collection(t,e){let n;n="string"==typeof t?this.firestore.collection(t):t;const{ref:r,query:i}=S(n,e);return new g(r,i,this)}doc(t){let e;return e="string"==typeof t?this.firestore.doc(t):t,new m(e,this)}createId(){return this.firestore.collection("_").doc().id}}]: 
    NullInjectorError: No provider for class{constructor(t,e,n,r,s,a,u){this.scheduler=new p.e(a,s),this.firestore=a.runOutsideAngular(()=>{const n=Object(p.f)(t,e).firestore();return n.settings(r||_),n}),this.persistenceEnabled$=n&&Object(y.p)(s)?a.runOutsideAngular(()=>{try{return Object(i.a)(this.firestore.enablePersistence(u).then(()=>!0,()=>!1))}catch(t){return Object(o.a)(!1)}}):Object(o.a)(!1)}collection(t,e){let n;n="string"==typeof t?this.firestore.collection(t):t;const{ref:r,query:i}=S(n,e);return new g(r,i,this)}doc(t){let e;return e="string"==typeof t?this.firestore.doc(t):t,new m(e,this)}createId(){return this.firestore.collection("_").doc().id}}!
    at L.get (core.js.pre-build-optimizer.js:790)
    at core.js.pre-build-optimizer.js:1095
    at t (core.js.pre-build-optimizer.js:1026)
    at $.get (core.js.pre-build-optimizer.js:888)
    at core.js.pre-build-optimizer.js:1095
    at t (core.js.pre-build-optimizer.js:1026)
    at $.get (core.js.pre-build-optimizer.js:888)
    at _i (core.js.pre-build-optimizer.js:21971)
    at Ki.get (core.js.pre-build-optimizer.js:23057)
    at Object.et (core.js.pre-build-optimizer.js:1224)

[davideast]

Hey @markgoho! Is the Build Optimizer still in beta? Last time I checked there were all kinds of weird issues when using it with non-core libraries.

[markgoho]

I'm not sure, but I know it's causing some gnarly out of memory issues right now and I've got it disabled across all my projects. This probably isn't an AF2 issue, so we could probably close it and at least folks could know that we identified it as a Angular CLI issue. What do you think?

[tayelno]

@markgoho I agree, I spent 2 days checking and testing my app, thought I had my lazy load setup broken, took me a lot of time to actually notice it was from the build-optimizer. 😞

[kkbear1985]

facing same issue, anyone have a work around?

[cedvdb]

Same issue here. Is it happening to anyone else still ?

[AnthonyNahas]

I am facing this kind of issue as well

[predorock]

Same Issue also for me.

Angular CLI: 6.0.8
Node: 8.11.3
OS: win32 x64
Angular: 6.0.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.10.7
@angular-devkit/build-optimizer   0.10.7
@angular-devkit/build-webpack     0.10.7
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.4.7
@angular/cli                      6.0.8
@angular/fire                     5.1.0
@angular/material                 6.4.7
@angular/pwa                      0.13.8
@angular/service-worker           7.2.14
@ngtools/webpack                  7.0.7
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.19.1

[dagyrox]

Same. Just created new app yesterday (Ng8). I got Dev deployed, but had to turn off optimizer to get it working Just deployed production, with default prod settings, no bueno.

[Manbec]

Hi. I'm on Angular 8.2.1 with this problem. I used to be on Angular 7 with this problem too. I found a way around. This was failing on lazy loaded components where I added the afAuth service in the constructor:

constructor(public afAuth: AngularFireAuth) {

}

So I created a service that was directly declared and provided in app component:

auth.service.js

import {Injectable} from '@angular/core';
import {AngularFireAuth} from '@angular/fire/auth';

@Injectable({
  providedIn: 'root',
})
export class AuthenticationService {

  constructor(public afAuth: AngularFireAuth) {

  }

}

and in app.module.ts inside NgModule:

providers: [ AuthenticationService ]

Then I Inject this service to any component in the constructor(Lazy loaded or not):

constructor(public authService: AuthenticationService) { }

and it's used almost the same. instead of:

this.afAuth.auth.currentUser.getIdToken...

I do

this.authService.afAuth.auth.currentUser.getIdToken...

Now I was able to run ng build --prod without the --optimization=false flag

And now my build runs properly on Angular 8.2.1
my package.json also has:

{
    "firebase": "^6.3.5",
    "@angular/cdk": "^8.1.2",
    "angularfire2": "^5.2.1",
 }

*Haven't tried it on Angular 7.

[Fomin2402]

Got the same problem
Everything was fine until I deploy my app on the server.
I got a runtime error:

Uncaught Error:
    StaticInjectorError[
        class{
            constructor(e,t){
                this.afDatabase=e,this.slugService=t
                and etc...

This is how my service looks:

@Injectable()
export class MyService {

    public cid: string;
    public database: FirebaseDatabase;

    public constructor(
        private afDatabase: AngularFireDatabase,
        private slugService: SlugService
    ) {
        this.cid = this.slugService.getSlug();
        this.database = this.afDatabase.database;
    }

   ....

I have lazy loading but these services I declare at app module

So, that's my environment:

Angular CLI: 7.3.9
Node: 10.16.1
OS: linux x64
Angular: 7.2.15

@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cli                      7.3.9
@angular/fire                     5.2.1
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

-----------------------------------------------
"angularfire2": "^5.2.1",
"firebase": "^6.3.5",

[jamesdaniels]

Closing as outdated.