Angular 15 with php routing requests and title

I have managed to make php read angular routes and update meta tags and title on each request.

After some time I uploaded a new build , this time it was cleaned , but now the angular it doesn't change the title of the document, in Google Chrome for ex, but if I hit view source, i can see all meta tags and title set correctly. This means the meta tags are applied correctly using a curl in php to grab meta informations.

I am trying to understand why my index.php doesn't want to change the title of the document and what I am missing.

.htaccess

DirectoryIndex index.php index.html

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

# Serve files and directories directly if they exist
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Redirect all other requests to index.php
RewriteRule ^ index.php [L]
</IfModule>

# Prevent directory listing
Options -Indexes

# Allow access to static assets
<FilesMatch "\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>


And this is my index.php that results from the angular build:

index.php

<?php

$slug = strtok($_SERVER['REQUEST_URI'], '?');
$slug = rtrim($slug, '/');

// Make the API request using cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $apiUrl);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode(['slug' => $slug]));

$response = curl_exec($ch);
curl_close($ch);

// Parse the API response
$meta = json_decode($response, true);
$metaTitle = $meta['title'];
$metaDescription = $meta['description'];
$metaKeywords = $meta['keywords'];
$metaImage = $meta['main_image'];
$metaUrl = $meta['og_url'];
?>

<html lang="en">

<head>
<title><?php echo htmlspecialchars($metaTitle); ?></title>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="./assets/icons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/svg+xml" href="./assets/icons/favicon.svg">
<link rel="shortcut icon" href="./assets/icons/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple-touch-icon.png">

<link rel="manifest" href="./assets/icons/site.webmanifest">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">

<meta name="description" content="<?php echo htmlspecialchars($metaDescription); ?>">
<meta name="keywords" content="<?php echo htmlspecialchars($metaKeywords); ?>">
<link rel="canonical" href="<?php echo htmlspecialchars($metaUrl); ?>">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo htmlspecialchars($metaTitle); ?>">
<meta property="og:description" content="<?php echo htmlspecialchars($metaDescription); ?>">
<meta property="og:url" content="<?php echo htmlspecialchars($metaUrl); ?>">
<meta property="og:image" content="<?php echo htmlspecialchars($metaImage); ?>">
<meta property="og:image:alt" content="<?php echo htmlspecialchars($metaTitle); ?>">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">
<!--<meta property="og:image:type" content="image/webp" />-->
<meta name="twitter:description" content="<?php echo htmlspecialchars($metaDescription); ?>">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo htmlspecialchars($metaTitle); ?>">
<meta name="twitter:image" content="<?php echo htmlspecialchars($metaImage); ?>">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="preconnect" href="https://fonts.googleapis.com">
<base href="/">
<link rel="stylesheet" href="styles.543ae2227a562180.css">
</head>

<body>
<app-root></app-root>
<script src="runtime.bf3051b90593455e.js" type="module"></script>
<script src="polyfills.c88ce8d8e8ff1349.js" type="module"></script>
<script src="scripts.91e58680bebedc85.js" defer></script>
<script src="main.be934ab3482f7d6c.js" type="module"></script>
</body>
</html>

Continue reading...