base url hosting doesn't trigger cloud functions

Question

meta-tags-are-not-updating-for-root-url-www-domain-com Base url not triggered hosting

I'm having the same problem as the link above it. And the solutions they gave seemed a bit weird to delete index.html every time i try to build/deploy my app also it didn't work cuz my angular app gave an error 'failed to lookup index' in browser directory. I've tried adding a route for '/' I've also tried single * and double ** for the source regex.

    "rewrites": [
    {
      "source": "/",
      "function": "ssr_h"
    },
    {
      "source": "**",
      "function": "ssr_h"
    }
    ]

And also tried to define the same base route server.ts. since someone told me that in regex

** != ''

Here's my full server.ts Same in server.ts tried single * and double ** for source in regex.

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
import * as express from 'express';

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
const compression = require('compression');

// The Express app is exported so that it can be used by serverless Functions.
// export const app = (): express.Express => {
function server(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/app/browser');
  const indexHtml = existsSync(join(distFolder, 'index.html')) ? 'index.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1m'
  }));

  // All regular routes use the Universal engine
  server.get('/', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });
  server.get('**', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

export const app = server();
app.use(compression());

export * from './src/main.server';

I'm using latests versions of angular 10.

"@angular/cli": "~10.2.3",
"@angular/compiler": "~10.2.5",
"@angular/compiler-cli": "~10.2.5",
"@angular/language-service": "~10.2.5",
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.6.0",
"firebase-functions-test": "^0.2.2",
"firebase-tools": "^8.20.0",
"@nguniversal/express-engine": "^10.1.0",

this post and this github issue are the same problem as i'm having every other single route works properly.

Answer 1

I don't like the solution that i came up with but I found this tutorial that helped me out angular universal tutorial

Since my code was kinda ready I just had to make small changes. I change public before it was pointing to my "dist//app//browser". Adding that first redirect to index2.html as it shows in the code below.

{
 "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source" : "**/*.@(css|js)",
        "destination": "/index2.html"
      },
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  }
}

The other steps were adding this to my deploy script and adding public to my git ignore

cp -a functions/dist/browser/. public/
mv public/index.html  public/index2.html