es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Angular universal solo funciona en la página de inicio.

Tengo un sitio web en Angular y estoy usando universal en él.
El problema es que puedo recargar la página de inicio y ver su código fuente en el navegador, pero no es posible en ninguna otra página y no puedo acceder a ellas a través de la URL directamente.

Estoy utilizando pm2 y Nginx.

Aquí está mi archivo server.ts

export function app(): express.Express {

  const server = express();
  const distFolder = join(process.cwd(), 'dist/new-insights/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Nuestro motor express-engine Universal (encontrado en 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);

  // Ejemplo de endpoints de API Rest de Express
  // server.get('/api/**', (req, res) => { });
  // Servir archivos estáticos desde /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));


  // Todas las rutas regulares usan el motor Universal
  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;

  // Iniciar el servidor Node
  const server = app();
  server.listen(port, () => {
    console.log(`Servidor Node Express escuchando en http://localhost:${port}`);
  });
}

// Webpack reemplazará 'require' con '__webpack_require__'
// '__non_webpack_require__' es un proxy para Node 'require'
// El siguiente código es para asegurarse de que el servidor se ejecute solo cuando no se requiera el conjunto de archivos.
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';
Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que el problema que estás enfrentando es que las páginas que no sean la página de inicio no se renderizan en el lado del servidor y no se pueden acceder mediante URL directas. Para resolver este problema, debes asegurarte de que todas las páginas se rendericen en el lado del servidor utilizando Angular Universal.

    En tu archivo server.ts, ya has implementado el motor Universal y has configurado el motor de vistas como html. También estás sirviendo archivos estáticos desde la carpeta distFolder. Sin embargo, debes asegurarte de que todas las rutas sean gestionadas por el motor Universal para habilitar la renderización en el lado del servidor para todas las páginas.

    Una forma de hacer esto es utilizar una ruta comodín que maneje todas las solicitudes y las pase al motor Universal, como se muestra en el siguiente código:

    server.get('*', (req, res) => {
      res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
    });
    

    Esta ruta manejará todas las solicitudes y las pasará al motor Universal para la renderización en el lado del servidor. Esto debería permitirte acceder a todas las páginas mediante URL directas y ver su código fuente en el navegador al recargar.

    Además, debes asegurarte de que tu configuración de Nginx esté correctamente establecida para servir la aplicación Angular y pasar las solicitudes al servidor Node.js que ejecuta tu aplicación a través de pm2.

Comments are closed.