如何让Angular Universal为Firebase云函数编译Typescript

我正在尝试将Angular Universal添加到我的Angular Firebase应用程序中。我一直在关注这件事。但是需要做一些改变，以便让它与云功能一起工作

我在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/browser
  dist/server

我将代码移到了cloudfunctions.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_模块

  ---

  dist/server/main.bundle.js->require（“angular2 markdown..->markdown.component.js:1->import使用firbase工具时，可以在初始化期间创建函数/索引文件的ts版本

  $ npm install -g firebase-tools
  
  $ firebase init
  

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

  {
    "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"
      ]
    }
  }
  

  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
  

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

  $ npm install -g firebase-tools
  
  $ firebase init