Angular Universal and openlayers

[Phreeman703]

I have a Angular 4 Universal app and i use openlayers. If i run app with client-side app work, but if i try run app with server side render, i caught an exception "window is not define".

[quentin-ol]

I'm sure to fully understand what you're trying to achieve. Could you be more specific?
What do you mean by server-side rendering. AFAIK Openlayers is a client side library, i.e. meant to run in a browser, electron, etc.

[Phreeman703]

I mean Angular Universal/. If I run app through angular-cli (ng serve), app is build and run. But if i trying to run Angular Universal show exception "window is not define", because openlayers use window(or document) for rendering map, but Angular Universal doesn't allow use widow(or document)

[quentin-ol]

Thanks for the information. I suggest you submit an issue in the Openlayers repo then (since the exception occurs in their code). Regarding this, I'm also in favour of letting the developer provide a replacement image in such case, i.e. if the map cannot be instantiated, provide a static image in place of the map. This could be done that way:

<aol-map [alt-img]="path_to_img">
</aol-map>

That should allow for server side rendering.
Opinions?

[Phreeman703]

I'm trying to insert a static picture, but I throw an error:

ERROR in Template parse errors:
Can't bind to 'alt-img' since it isn't a known property of 'aol-map'.

[quentin-ol]

Hey @Phreeman703, the above code was a mock-up, a proposal on the way to let user achieve this.
The underlying implementation is not done yet. But that's definitely in the todo-list.

[Phreeman703]

oh... @quentin-ol, i wasn't understood that is mock-up(( I found the solution with window. In server.ts need mock-up global['window'] = win and use domino

const domino = require('domino'),
      fs = require('fs'),
      path = require('path'),
      template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString(),
      win = domino.createWindow(template);

global['window'] = win;
global['document'] = win.document;

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import * as compression from 'compression';
import * as cookieparser from 'cookie-parser';
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

/*const fs = require('fs');
const path = require('path');*/

const files = fs.readdirSync(`${process.cwd()}/dist-server`);
const mainFiles = files.filter(file => file.startsWith('main'));
const hash = mainFiles[0].split('.')[1];
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(`./dist-server/main.${hash}.bundle`);
import { ngExpressEngine } from '@nguniversal/express-engine';
import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
const PORT = 4000;

enableProdMode();

const app = express();
app.use(compression());
app.use(cookieparser());

// const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', 'src');

app.get('*.*', express.static(path.join(__dirname, '.', 'dist')));

app.get('*', (req, res) => {
  /*global['window'] = global;
  global['document'] = template;*/
  global['navigator'] = req['headers']['user-agent'];
  /*global['CSS'] = null;*/

  res.render('../dist/index', {
    req: req,
    res: res,
    providers: [
      {
        provide: REQUEST, useValue: (req)
      },
      {
        provide: RESPONSE, useValue: (res)
      }
    ]
  });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
}); 

but the solution led to another error. Can not use 'in' operator to search for 'geolocation' in undefined. Soree all this happens, because they made a mock-up 'window'

[AbdallahAbdedaiem]

Please let me know if you found a solution for this.

[jeandonaldroselin]

@AbdallahAbdedaiem there is a solution there submitted by a developer => #202.

But the Pull Request is still not merged after two years @quentin-ol are you alive ? lol.

[jeremy-eychenne]

Hi, thank you for your contribution. As we just merged next branch into main and released 18.0.0 version, can you please tell us if this issue is still applicable, or close it if it is not?

Without answer within 3 months, we will automatically close it.