Pesquisa de site

typescript - Como implantar aplicativo Angular 9 universal com funções do Firebase

Recentemente atualizei para a versão mais recente do Angular 9 e criei um aplicativo. Tornei este aplicativo universal usando o comando: ng add @nguniversal/express-engine e depois construí o aplicativo usando: npm run build:ssr && npm run serve:ssr

agora a pasta dist foi criada com as pastas browser e server dentro dela, mas nenhum arquivo server.js foi criado no diretório raiz do dist e também o arquivo de configuração do webpack não foi criado quando eu construí o aplicativo com Angular 9. Por favor, me diga uma maneira de como posso implantar a build do meu novo aplicativo Angular 9 Universal no Firebase Cloud Functions e Hosting

Resposta #1

a partir do Angular 9 você terá a seguinte estrutura de build

 dist            
  ├── server            
  |    └── main.js and some other files like firebase analytics stuff       
  └── browser                
       └── index.html and all files for the broswer

agora, para testar isso, você precisa dar o seguinte comando a partir do diretório raiz do seu projeto

node dist/server

isso vai invocar o arquivo main.js na pasta do servidor e seu aplicativo será servido localmente. informações serão exibidas na tela sobre a URL do localhost com a porta.

agora, para implantar no Firebase, use o seguinte código

import * as functions from 'firebase-functions';
import * as path from 'path';

const app = require(path.resolve(__dirname, "./dist/server/main")).app; // change the path according to your project structure
const myApp = functions.https.onRequest(app());

e você terá uma função myApp onde poderá acessar seu aplicativo Angular SSR

[ATUALIZAÇÃO]

não há um lugar fixo onde você inicializa suas funções. tudo o que importa é que o caminho de dist/server/main esteja correto na função myApp

mais uma coisa que eu esqueci de mencionar é que você precisa atualizar o campo hosting do seu package.json para a seguinte configuração =>

  ...
  "hosting": [{
        "target": "app",
        "public": "/dist/browser", // change it according to your directory structure
        "rewrites": [{
            "source": "**",
            "function": "myApp"
        }]
  }]
  ...

espero que ajude ;)

Artigos relacionados