我正在用Angular8制作web应用程序，用Angularfire制作Firebase(数据库、函数、主机(。
在非生产模式下，所有工作均按预期进行。但当我试图在生产模式下构建(甚至服务(应用程序项目时，该应用程序在浏览器控制台中抛出以下错误：
ERROR Error: Uncaught (in promise): TypeError: Object(...)(...).functions is not a function
TypeError: Object(...)(...).functions is not a function
at main.dead59fe67a31b34cf9a.js:2
at ZoneDelegate.invoke (polyfills.be24bb8f50c410d765d1.js:2)
at Zone.run (polyfills.be24bb8f50c410d765d1.js:2)
at NgZone.runOutsideAngular (main.dead59fe67a31b34cf9a.js:2)
at new AngularFireFunctions (main.dead59fe67a31b34cf9a.js:2)
at main.dead59fe67a31b34cf9a.js:2
at _createProviderInstance (main.dead59fe67a31b34cf9a.js:2)
at resolveNgModuleDep (main.dead59fe67a31b34cf9a.js:2)
at NgModuleRef_.get (main.dead59fe67a31b34cf9a.js:2)
at main.dead59fe67a31b34cf9a.js:2
at resolvePromise (polyfills.be24bb8f50c410d765d1.js:2)
at resolvePromise (polyfills.be24bb8f50c410d765d1.js:2)
at polyfills.be24bb8f50c410d765d1.js:2
at ZoneDelegate.invokeTask (polyfills.be24bb8f50c410d765d1.js:2)
at Object.onInvokeTask (main.dead59fe67a31b34cf9a.js:2)
at ZoneDelegate.invokeTask (polyfills.be24bb8f50c410d765d1.js:2)
at Zone.runTask (polyfills.be24bb8f50c410d765d1.js:2)
at drainMicroTaskQueue (polyfills.be24bb8f50c410d765d1.js:2)
ng serve --prod和ng build --prod期间没有错误或警告。
package.json:
{
"name": "angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "^8.2.0-next.1",
"@angular/cdk": "~8.2.3",
"@angular/common": "^8.2.0-next.1",
"@angular/compiler": "^8.2.0-next.1",
"@angular/core": "^8.1.1",
"@angular/fire": "^5.4.2",
"@angular/forms": "^8.2.0-next.1",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "^8.2.0-next.1",
"@angular/platform-browser-dynamic": "^8.2.0-next.1",
"@angular/router": "^8.2.0-next.1",
"@babel/compat-data": "^7.8.0",
"@ng-bootstrap/ng-bootstrap": "^4.2.1",
"@swimlane/ngx-charts": "^10.1.0",
"@swimlane/ngx-datatable": "^15.0.2",
"angular-calendar": "^0.25.2",
"angular-datatables": "^6.0.1",
"angular-file-uploader": "^5.0.2",
"angular-notifier": "^4.1.1",
"bootstrap": "^4.3.1",
"c3": "^0.4.23",
"chart.js": "^2.8.0",
"chartist": "^0.11.3",
"core-js": "^2.6.9",
"d3": "^4.8.0",
"datatables.net": "^1.10.19",
"datatables.net-dt": "^1.10.19",
"firebase": "^7.14.5",
"hammerjs": "^2.0.8",
"jquery": "^3.5.1",
"lodash": "^4.17.14",
"ng-chartist": "^1.1.1",
"ng-multiselect-dropdown": "^0.2.3",
"ng2-charts": "^1.6.0",
"ng2-completer": "^2.0.8",
"ng2-dragula": "^2.1.1",
"ng2-slim-loading-bar": "^4.0.0",
"ng2-smart-table": "1.3.5",
"ng2-validation": "^4.2.0",
"ngx-perfect-scrollbar": "6.1.0",
"ngx-quill": "^7.0.2",
"ngx-toastr": "^8.10.2",
"node-sass": "^4.14.1",
"pace-js": "^1.0.2",
"quill": "^1.3.7",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.5.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.24",
"@angular/cli": "^8.3.19",
"@angular/compiler-cli": "^8.2.0-next.1",
"@angular/language-service": "^8.2.0-next.1",
"@types/c3": "^0.6.4",
"@types/chartist": "^0.9.46",
"@types/datatables.net": "^1.10.17",
"@types/jasmine": "^2.8.16",
"@types/jasminewd2": "^2.0.6",
"@types/jquery": "^3.3.30",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.2.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.1",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~3.4.5",
"@angular-devkit/architect": "<0.900 || ^0.900.0-0 || ^9.0.0-0",
"firebase-tools": "^7.12.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1"
},
"resolutions": {
"@babel/preset-env": "7.5.5"
}
}
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
CommonModule,
LocationStrategy,
HashLocationStrategy
} from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AgmCoreModule } from '@agm/core';
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';
import { FullComponent } from './layouts/full/full.component';
import { BlankComponent } from './layouts/blank/blank.component';
import { NavigationComponent } from './shared/header-navigation/navigation.component';
import { SidebarComponent } from './shared/sidebar/sidebar.component';
import { BreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';
import { Approutes } from './app-routing.module';
import { AppComponent } from './app.component';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireFunctions } from '@angular/fire/functions';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { SharedModule } from './shared/shared.module';
import { ToastrModule } from 'ngx-toastr';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
import { AuthGuardService } from './shared/guards/authGuard.service';
import { RoleGuardService } from './shared/guards/roleGuard.service';
import { CourseModalComponent } from './organization/organization-courses/course-modal/course-modal.component';
import { CourseInstanceComponent } from './organization/organization-courses/course-instance/course-instance.component';
import { CourseInstanceModalComponent } from './organization/organization-courses/course-instance-modal/course-instance-modal.component';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true,
wheelSpeed: 1,
wheelPropagation: true,
minScrollbarLength: 20
};
@NgModule({
declarations: [
AppComponent,
FullComponent,
BlankComponent,
NavigationComponent,
BreadcrumbComponent,
SidebarComponent,
CourseModalComponent,
CourseInstanceComponent,
CourseInstanceModalComponent,
],
imports: [
CommonModule,
BrowserModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
AngularFireStorageModule,
AngularFireAuthModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
NgbModule.forRoot(),
SlimLoadingBarModule.forRoot(),
RouterModule.forRoot(Approutes, { useHash: false }),
PerfectScrollbarModule,
AgmCoreModule.forRoot({ apiKey: '/' }),
ToastrModule.forRoot(),
SharedModule,
MatDatepickerModule,
MatNativeDateModule,
],
entryComponents: [
CourseModalComponent,
CourseInstanceModalComponent,
],
providers: [
AuthGuardService,
RoleGuardService,
AngularFireFunctions,
{
provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
},
{
provide: LocationStrategy,
useClass: HashLocationStrategy
},
MatDatepickerModule,
{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' },
],
bootstrap: [AppComponent]
})
export class AppModule { }
我试图查找这个错误，但一无所获。还尝试了其他AngularFire版本。
知道是什么原因造成的吗？
由于某些原因，您似乎也需要导入AngularFireFunctionsModule。
import { AngularFireFunctionsModule } from '@angular/fire/functions';
@NgModule({
imports: [
CommonModule,
BrowserModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireFunctionsModule, // <-- Add it after firebase app initialization
AngularFirestoreModule,
AngularFireStorageModule,
AngularFireAuthModule,
]
})
export class AppModule { }