Angular универсальный только для специальных c модулей - PullRequest
Новая
       109

Angular универсальный только для специальных c модулей

1 голос
/ 06 августа 2020

У меня есть веб-приложение Angular (клиент - Angular 9, сервер - Java), и теперь я хочу добавить новые компоненты для рендеринга на сервере (например, Express-engine), используя Angular universal .

Моя цель - продолжать запускать все приложение в браузере как обычно, и только определенный модуль c новых компонентов будет отображаться на сервере. Веб-сайт должен быть загружен как обычно, и при маршрутизации в указанную c часть приложения он загрузит модуль предварительной визуализации с сервера.

Возможно ли визуализировать только часть Интернета на сервер?

Спасибо!

РЕДАКТИРОВАТЬ: Как предлагает @izmaylovdev, я попытался отредактировать server.ts с помощью приведенного ниже get: 

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

Но как я могу увидеть другое поведение? Я могу видеть другой журнал только при обслуживании по разным URL.

1 Ответ

1 голос
/ 06 августа 2020

SSR позволяет вам возвращать обработанную страницу с сервера для любого маршрута вашего приложения. Но после загрузки JS скриптов ваше приложение работает как обычно (с рендерингом на стороне клиента). Если вы не хотите использовать SSR для определенных маршрутов c, вы можете настроить свой сервер (или прокси) для индекса возврата. html (из папки dist) для этих маршрутов и использовать SSR для других маршрутов. настройка сервера Angular Универсальный, это просто механизм шаблонов.

Для вашего случая вы можете настроить Express следующим образом: 

export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'path to dist folder');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.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
  // app.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('**/*.*', express.static(distFolder, {
    maxAge: '1y'
  }));
      
  server.get('*', (reg, res) => { res.send(indexHtml) });

  server.get(matcherForSpecificRoutes, (req, res) => {
    global['navigator'] = req['headers']['user-agent'];
    const http = req.headers['x-forwarded-proto'] === undefined ? 'http' : req.headers['x-forwarded-proto'];

    const url = req.originalUrl;
    // tslint:disable-next-line:no-console
    console.time(`GET: ${url}`);

    res.render(indexHtml, {
      req,
      providers: [
        { provide: APP_BASE_HREF, useValue: req.baseUrl },
        {
          provide: REQUEST,
          useValue: req
        },
        {
          provide: RESPONSE,
          useValue: res     
        },
        {
          provide: 'ORIGIN_URL',
          useValue: (`${http}://${req.headers.host}`)
        }
      ]
    });
  });

  return server;
}
...