Meta Title doesn't appear in view page source but its does in inspect

Question

I was trying to make my meta tags dynamic with installing angular universal. After a lot of issues I had to solve to add angular universal to my project. and now its working perfectly. I run the project using npm run dev:ssr tag. hopefully to see my dynamic meta tags works. but unfortunately its didn't work and there is no any error message.

After a lot of search about this issue I just think the problem could be because of code cant work with angular universal. but the question is how to know what works and what doesn't with angular universal?

Angular and Angular universal Versions: 14

server.ts

import 'zone.js/node';

import { APP_BASE_HREF } from '@angular/common';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { existsSync } from 'fs';
import { join } from 'path';

import { AppServerModule } from './src/main.server';

import 'localstorage-polyfill';
const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();
global['localStorage'] = localStorage;
global['document'] = mock.getDocument();
global['window'] = mock.getWindow();
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/PTechs/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

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

  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: '1y'
  }));

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

  return server;
}

function run(): void {
  const port = process.env['PORT'] || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

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

I created a new project and installed angular universal and set meta tags its work without any issues. then I just compared between the two projects all the files which related to angular universal to make sure there is no difference.

Please if you need more informations just tell me.

Answer 1

I fixed the problem by my self it was so stupid problem and I didn't understand exactly why. there was a conflict with a random module in my project when I removed the implementation of the module it Solved!

and that's why all people say angular universal is a garbage :)