Angular Universal SSR использовать навигатор (оконные или другие собственные объекты только для браузера)

Question

Из документов:

Например, ваша страница на стороне сервера не может ссылаться только на собственные объекты браузера, такие как окно, документ, навигатор или местоположение.Если они вам не нужны на странице, отображаемой на сервере, вы можете обойти их с помощью условной логики.Кроме того, вы можете найти вводимую угловую абстракцию над нужным вам объектом, таким как Местоположение или Документ;он может адекватно заменить конкретный API, который вы вызываете.Если Angular этого не предоставляет, вы можете написать собственную абстракцию, которая делегирует API браузера в браузере и удовлетворительную альтернативную реализацию на сервере.

Имеет смысл, что сервер можетне получить доступ к объектам браузера.Но это может быть достигнуто:

В качестве альтернативы, вы можете найти вводимую угловую абстракцию над нужным вам объектом, таким как Location или Document;он может адекватно заменить конкретный API, который вы вызываете.

Далее:

Если Angular не предоставляет его, вы можете написать свою собственную абстракцию, которая делегируетк API браузера в браузере и к удовлетворительной альтернативной реализации на сервере.

Где я могу найти, какие из них предоставляет Angular и как их использовать?Я специально ищу навигатор.

Если навигатор не предоставляется Angular, как я могу написать собственную абстракцию?

Боковой узел: я использовал ng add @nguniversal/express-engine --clientProject angular.io-example, чтобы начать работу с ssr.

Answer 1

Хотя я бы не рекомендовал такой подход, если вам нужен объект navigator в Angular Universal, вы можете проверить проект Domino .

Затем в вашем server.ts файл, вы бы сделали что-то вроде этого:

const template = readFileSync(join(DIST_FOLDER, 'index.html')).toString();
const win = domino.createWindow(template);

global['window'] = win;
global['Node'] = win.Node;
global['navigator'] = win.navigator;
global['Event'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['document'] = win.document;

А в обработчике вы можете сделать:

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    callback(null, html);
  });
});

См .: https://mdbootstrap.com/angular/angular-universal/