TL; DR:
Исходный код и
DEMO
Проблема в том, что пакет @agm/core скомпилирован с модулем es2015. В результате он содержит import и export в коде js.
Чтобы исправить это, у вас есть два основных варианта:
1. Скомпилируйте пакет @ agm / core в формат commonjs.
Вы можете использовать babel или машинопись для компиляции этого пакета. Затем вам нужно убедиться, что вы указали скомпилированную версию в своих зависимостях функций
функция / package.json
"dependencies": {
...
"@agm/core": "file:./@agm/core"
},
Здесь я использую локальную зависимость, но вы также можете использовать собственную опубликованную версию.
Другой метод будет компилироваться непосредственно в node_modules и публиковать все node_modules ( Я бы избегал этого ):
firebase.json
{
"functions": {
"ignore": []
}
}
Как скомпилировать?
Бабель
Установка зависимостей в корневой каталог.
npm i -D @babel/cli @babel/core @babel/preset-env
Используйте следующий скрипт для компиляции:
package.json
"postbuild": "babel node_modules/@agm/core -d functions/@agm/core --presets @babel/preset-env && node ./copy-package-json.js"
, где
копия-пакет-json.js
const fs = require('fs-extra');
const { join } = require('path');
(async() => {
await fs.copy(join(process.cwd(), 'node_modules/@agm/core/package.json'),
join(process.cwd(), 'functions/@agm/core/package.json'));
})();
Машинопись
tsconfig.agm.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./functions/@agm/core",
"types": [],
"module": "commonjs"
},
"include": [
"node_modules/@agm/core"
]
}
package.json
"postbuild": "tsc -p tsconfig.agm.json --allowJs && node ./copy-package-json.js"
2. Создать серверный комплект
Это то, что используется в Angular universal , поэтому Я предпочитаю это решение .
Также следуйте этому quide
Простые шаги:
1. Установить глобальные зависимости
Я установил:
- @ угловой / кли @ 7.3.8
- firebase-tools@6.5.2
2. Создать новый угловой проект
ng new angular-agm
3. Добавить Угловой универсальный
ng add @nguniversal/express-engine --clientProject angular-agm
4. Обновление server.ts
Экспортируйте экспресс-приложение, затем удалите вызов для прослушивания и измените индекс на index2.
import 'zone.js/dist/zone-node';
import {enableProdMode} from '@angular/core';
// Express Engine
import {ngExpressEngine} from '@nguniversal/express-engine';
// Import module map for lazy loading
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import {join} from 'path';
import * as path from 'path';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
export const app = express();
// const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
const index = require('fs')
.readFileSync(path.resolve(DIST_FOLDER, 'index2.html'), 'utf8')
.toString();
const domino = require('domino');
const win = domino.createWindow(index);
global['window'] = win;
global['document'] = win.document;
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render('index2', { req });
});
// Start up the Node server
/*app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});*/
5. Строить
npm run build:ssr
где сборка: сср
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server && node ./tools/copy-artifacts.js",
копия-artifacts.js
const fs = require('fs-extra');
const { join } = require('path');
(async() => {
const src = join(process.cwd(), 'dist');
const copy = join(process.cwd(), 'functions/dist');
await fs.rename(join(src, 'browser/index.html'), join(src, 'browser/index2.html'));
await fs.remove(copy);
await fs.copy(src, copy);
})();
6. Обновите functions / index.js , чтобы использовать встроенную версию экспресс-приложения
const functions = require('firebase-functions');
const { app } = require('./dist/server');
exports.ssr = functions.https.onRequest(app);
7. Настроить firebase.json
{
"hosting": {
"public": "dist/browser",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "ssr"
}
]
}
}
Исходный код можно найти на Github
См. Также демоверсию https://angular -agm.firebaseapp.com /