angular - 如何让 Angular Universal 为 Firebase Cloud Functions 编译 Typescript

Question

我正在尝试将 Angular Universal 添加到我的 Angular Firebase 应用中。我一直在关注这个 video .但需要进行一些更改才能使其与云功能一起使用。

我在 angular-cli.config 中的“apps”数组中添加了一个额外的配置 block

// .angular-cli.config.json - "apps" [
{
      "platform": "server",
      "root": "src",
      "outDir": "dist/server",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.server.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.server.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "serviceWorker": false,
      "styles": [
        "styles/styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
}

接下来我还添加了一个名为 tsconfig.server.json 的附加文件

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "commonjs",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

然后我创建了一个额外的 app.server.module.ts

import { NgModule } from '@angular/core';
import { AppModule } from './app.module';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule, //  <-- needed for state transfer
    ModuleMapLoaderModule // <-- needed for lazy-loaded routes,
  ],
  declarations: []
})
export class AppServerModule {}

与上面的视频一样，代码被转译到浏览器应用程序和服务器应用程序的 dist 文件夹中。尽管我已经决定避免使用 webpack 创建 server.js 文件，而是决定将其作为 typescript 直接添加到我的云函数中。

ng build --prod && ng build --prod --app 1 --output-hashing=false

创造..

  dist/browser
  dist/server

我已将代码移至 cloud functions.js 而不是 server.js。但是，从 dist/server/main.bundle.js 导入我的服务器包将导致 firebase 部署过程出错。

// cloud functions code above...

// Causes Error: -> const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./../../dist/server/main.bundle');

// more cloud functions code below..

我收到的错误是:

i  functions: preparing functions directory for uploading...

Error: Error occurred while parsing your function triggers.
project_root/node_modules/angular2-markdown/markdown/markdown.component.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, ElementRef, Input } from '@angular/core';

• 我相信我的云函数只使用节点 6。

• dist/server/main.bundle.js 需要一个使用 es6 导入语法的 node_module。

  dist/server/main.bundle.js -> require("angular2-markdown.. -> markdown.component.js:1 -> import <-- { 组件,

• 我已经尝试让函数 tsconfig.json 将输出带到 es5，但我不认为它可以操纵 node_module .js 依赖项成为较低的 js。 (node_modules 比 functions 文件夹中的 node_modules 高一级文件夹 - (dist 文件夹也比 functions 文件夹高一级))

函数/tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5", // <--- Trying to es5 the output
    "typeRoots": [
      "node_modules/@types",
      "src/types-overwrite"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

• 是否可以获取 firebase 云函数来升级节点版本以使用像 Node 10.5 一样的导入语法？
• 如果没有，有没有办法我可以只编辑我的 tsconfig 来将所有内容都转换为 es5？

更新:

我已经创建了一个示例 github 项目来下载和测试功能部署。

链接:https://github.com/Jonathan002/firebase-cloud-functions-node-6-import-statement-broken/blob/master/README.md

我还尝试将所有内容捆绑为 webpack_require 以转译 node_modules 以与 bundle 内联，而不是使用 webpack 被要求，但出现了错误:

TypeError: o.initStandalone is not a function

我相信它来自所依赖的 firebase node_module，但我无法证实这一点。 (此错误仅出现在我自己正在处理的项目中，并且很难确定示例项目中要包含哪些 node_module 才能使用 webpack 获得这些相同的错误结果)。

下面显示的是我在函数中使用的 webpack 配置:

var path = require('path');

module.exports = {
  entry: './src/index.ts',
  target: 'node',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'lib')
  },
  mode: 'none',
  devtool: 'source-map',
  plugins: [],
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'ts-loader' },
    ]
  },
};

在函数文件夹中时，您可以使用以下方法生成捆绑代码:

webpack --config webpack.config.js --colors --progress

并在 firebase.json 中使用 firebase 的 typescript 函数删除预部署代码:

{
  "functions": {
    "predeploy": [
      // remove this..
      // -> "npm --prefix \"$RESOURCE_DIR\" run lint",
      // -> "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  }
}

Answer 1

当使用 firbase 工具时，您可以在初始化期间创建函数/索引文件的 ts 版本。

$ npm install -g firebase-tools

$ firebase init

在设置选项中，为函数目录选择 ts 选项而不是 js。