Question

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

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

// .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文件，而是决定将其直接作为打字稿添加到我的云函数中。

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

创建..

  dist/browser
  dist/server

我将代码而不是server.js移至了cloud functions.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 <-{Component，
我已经尝试过要求tsconfig.json函数将输出带到es5，但我认为它不能将node_module .js依赖项转换为较低的js。（node_modules文件夹比functions文件夹中的node_modules高1个文件夹-（dist文件夹也比functions文件夹高1层））

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内联到捆绑包中，而不是使用webpack进行打包，但出现了错误：

TypeError：o.initStandalone不是函数

我认为它来自依赖的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' },
    ]
  },
};

在functions文件夹中，您可以使用以下方法生成捆绑代码：

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

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

如何获得Angular Universal来为Firebase云功能编译Typescript

更新：

1 个答案: