I'm trying to add Angular Universal to my Angular Firebase app. I've been following along with this video. But needed to make some changes in order to get it to work with cloud functions.
I have added an additional block of config to the "apps" array in angular-cli.config
// .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"
}
}
Next I have also added an additional file called 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"
}
}
I then created an extra 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 {}
Like the above video, the code gets transpiled into a dist folder for a browser app and server app. Although I have decided to avoid using webpack to create the server.js file and instead decided to add this to my cloud functions directly as typescript.
ng build --prod && ng build --prod --app 1 --output-hashing=false
creates..
dist/browser
dist/server
Instead of server.js I've moved the code to cloud functions.js. However importing my server bundle from dist/server/main.bundle.js will cause the firebase deploy process to Error.
// cloud functions code above...
// Causes Error: -> const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./../../dist/server/main.bundle');
// more cloud functions code below..
The Error I recieve is:
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';
- I believe my cloud functions is only using node 6.
The dist/server/main.bundle.js requires a node_module that uses es6 import syntax.
dist/server/main.bundle.js -> require("angular2-markdown.. -> markdown.component.js:1 -> import <-- { Component,
I've already tried asking the functions tsconfig.json to bring the output to es5, but I don't think it can manipulate the node_module .js dependencies to be a lower js. (The node_modules are 1 folder higher than the node_modules in the functions folder - (The dist folder is also 1 level higher above the functions folder))
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"
]
}
}
- Is it possible to get firebase cloud functions to upgrade the node version to use the import syntax like Node 10.5?
- If not is there a way I can just edit my tsconfig to just get everything to transpile to es5?
Update:
I've created an example github project to download and test the function deployment.
I have also tried to bundle everything as webpack_require to transpile the node_modules to be inlined with the bundle instead of being required using webpack, but have gotten the error:
TypeError: o.initStandalone is not a function
I believe it comes from a firebase node_module being depended on, but I haven't been able to confirm this. (This error only appears on my own project I'm working on and it was hard to determine exactly what node_module to include in the example project to get these same error results with webpack).
Shown below though is the webpack config I used in functions:
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' },
]
},
};
When in the functions folder, you can generate the bundled code using:
webpack --config webpack.config.js --colors --progress
and removing the predeploy code with firebase's typescript functions in firebase.json:
{
"functions": {
"predeploy": [
// remove this..
// -> "npm --prefix \"$RESOURCE_DIR\" run lint",
// -> "npm --prefix \"$RESOURCE_DIR\" run build"
]
}
}
