首页 > 解决方案 > 无法使用 AngularFire 将 Firebase 功能更新到 Angular Universal 应用程序中的节点 12

问题描述

我按照本教程将 Angular Universal 部署到 firebase 函数并使用 Firebase 进行部署:https ://medium.com/@chris.duebbert/angular-9-universal-firebase-deploy-8d8d47244e1c

在我将 AngularFireModule 添加到我的 app.module.ts 之前,一切正常。然后,当我使用节点 12 运行“ng deploy”时,在“ssr”函数的日志中出现以下错误:

提供的模块无法加载。您的代码中是否存在语法错误?详细的堆栈跟踪:ReferenceError: globalThis is not defined

当我尝试将本地节点版本设置为 10 时,我直接在终端中收到相同的错误。

显然,Firebase 使用 globalThis 需要节点版本 12(Angular 11 在 SSR @nguniversal/express-engine ReferenceError: globalThis is not defined 上运行)。我在 /functions/package.json 中添加了以下内容:

app.module.ts

    "engines": {
        "node": "12"
      },

我可以为节点版本输入任何数字,并且我的 SSR 功能仍在使用节点 10 进行部署,并且“globalThis”错误仍在继续。我正在使用 Firebase 的 Blaze 计划。这是我的 app.module.ts:


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule.withServerTransition({ appId: 'serverApp' }),
        AppRoutingModule,
        NoopAnimationsModule,
        FormsModule,
        NgxTwitterTimelineModule,
        AngularFireModule.initializeApp(config),
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

函数/package.json


    {
      "name": "functions",
      "scripts": {
        "lint": "tslint --project tsconfig.json",
        "build": "tsc",
        "serve": "npm run build && firebase emulators:start --only functions",
        "shell": "npm run build && firebase functions:shell",
        "start": "npm run shell",
        "deploy": "firebase deploy --only functions",
        "logs": "firebase functions:log"
      },
      "engines": {
        "node": "12"
      },
      "main": "lib/index.js",
      "dependencies": {
        "firebase-admin": "^9.4.2",
        "firebase-functions": "^3.13.0",
        "grpc": "^1.24.4"
      },
      "devDependencies": {
        "tslint": "^5.12.0",
        "typescript": "^3.8.0",
        "firebase-functions-test": "^0.2.0"
      },
      "private": true
    }

标签: node.jsfirebaseangularfireangular-universal

解决方案


你需要 polyfill globalThis https://github.com/angular/angularfire#polyfills


推荐阅读