Я пытаюсь добавить Angular Universal в мое приложение Angular Firebase. Я следил за этим видео . Но нужно было внести некоторые изменения, чтобы заставить его работать с облачными функциями.
Я добавил дополнительный блок конфигурации в массив «apps» в 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"
}
}
Далее я также добавил дополнительный файл с именем 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 я переместил код в облако 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.
dist / server / main.bundle.js -> require ("angular2-markdown .. -> markdown.component.js: 1 -> import <- {Component, </p>
Я уже пытался попросить функции tsconfig.json вывести выходные данные в es5, но я не думаю, что он может манипулировать зависимостями node_module .js, чтобы быть более низким js. (Папка node_modules на 1 папку выше, чем node_modules в папке функций - (папка dist также на 1 уровень выше папки функций))
функция / 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 не является функцией
Я полагаю, что это происходит из-за зависимого от node_module модуля firebase, но я не смог это подтвердить. (Эта ошибка появляется только в моем собственном проекте, над которым я работаю, и было трудно точно определить, какой узел_модуля включить в пример проекта, чтобы получить те же результаты ошибок с веб-пакетом).
Ниже показан пример конфигурации веб-пакета, который я использовал в функциях:
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 в firebase.json:
{
"functions": {
"predeploy": [
// remove this..
// -> "npm --prefix \"$RESOURCE_DIR\" run lint",
// -> "npm --prefix \"$RESOURCE_DIR\" run build"
]
}
}