Angular：类型错误：Object(...)(...).functions 不是函数

问题描述 投票：0回答：2

我正在使用 Angular8 和 Firebase（数据库、函数、托管）使用 Angularfire 制作 Web 应用程序。

在非生产模式下，一切按预期工作。但是，当我尝试在生产模式下构建（甚至提供）应用程序项目时，应用程序会在浏览器控制台中抛出以下错误：

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 版本。

知道什么可能会导致这种情况吗？

angular firebase google-cloud-functions
2个回答
3
投票

出于某种原因，看起来您也需要导入

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 { }
0
投票

我有同样的错误消息，但已经在我的

AngularFireFunctionsModule
中导入了
AppModule
。

我发现如果你用 

angular/fire@7
运行 Angular16，就会出现这个确切的错误。 Npm 不会抱怨版本。请务必使用
angular/fire@16
。

顺便说一句，7之后的版本是16。
https://www.npmjs.com/package/%40angular/fire?activeTab=versions

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.