Error with Angular Universal

[yalesnikov]

Hi, everyone.

I have a trouble when trying to generate static pre-render with Angular Universal

ERROR ReferenceError: window is not defined
    at NgxMetrikaService.insertMetrika (webpack:///./node_modules/@kolkov/ngx-metrika/fesm5/kolkov-ngx-metrika.js?:202:9)
    at NgxMetrikaService.configure (webpack:///./node_modules/@kolkov/ngx-metrika/fesm5/kolkov-ngx-metrika.js?:85:14)
    at new NgxMetrikaService (webpack:///./node_modules/@kolkov/ngx-metrika/fesm5/kolkov-ngx-metrika.js?:48:18)
    at _createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:20931:20)
    at _createProviderInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:20893:26)
    at resolveNgModuleDep (webpack:///./node_modules/@angular/core/fesm5/core.js?:20856:21)
    at NgModuleRef_.get (webpack:///./node_modules/@angular/core/fesm5/core.js?:21547:16)
    at resolveDep (webpack:///./node_modules/@angular/core/fesm5/core.js?:21918:45)
    at createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:21790:29)
    at createDirectiveInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:21669:20)
Unhandled Promise rejection: window is not defined ; Zone: <root> ; Task: Promise.then ; Value: ReferenceError: window is not defined
    at NgxMetrikaService.insertMetrika (webpack:///./node_modules/@kolkov/ngx-metrika/fesm5/kolkov-ngx-metrika.js?:202:9)
    at NgxMetrikaService.configure (webpack:///./node_modules/@kolkov/ngx-metrika/fesm5/kolkov-ngx-metrika.js?:85:14)
    at new NgxMetrikaService (webpack:///./node_modules/@kolkov/ngx-metrika/fesm5/kolkov-ngx-metrika.js?:48:18)
    at _createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:20931:20)
    at _createProviderInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:20893:26)
    at resolveNgModuleDep (webpack:///./node_modules/@angular/core/fesm5/core.js?:20856:21)
    at NgModuleRef_.get (webpack:///./node_modules/@angular/core/fesm5/core.js?:21547:16)
    at resolveDep (webpack:///./node_modules/@angular/core/fesm5/core.js?:21918:45)
    at createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:21790:29)
    at createDirectiveInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:21669:20) ReferenceError: window is not defined
    at NgxMetrikaService.insertMetrika (webpack:///./node_modules/@kolkov/ngx-metrika/fesm5/kolkov-ngx-metrika.js?:202:9)
    at NgxMetrikaService.configure (webpack:///./node_modules/@kolkov/ngx-metrika/fesm5/kolkov-ngx-metrika.js?:85:14)
    at new NgxMetrikaService (webpack:///./node_modules/@kolkov/ngx-metrika/fesm5/kolkov-ngx-metrika.js?:48:18)
    at _createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:20931:20)
    at _createProviderInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:20893:26)
    at resolveNgModuleDep (webpack:///./node_modules/@angular/core/fesm5/core.js?:20856:21)
    at NgModuleRef_.get (webpack:///./node_modules/@angular/core/fesm5/core.js?:21547:16)
    at resolveDep (webpack:///./node_modules/@angular/core/fesm5/core.js?:21918:45)
    at createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:21790:29)
    at createDirectiveInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:21669:20)

Can anybody help me?

[kolkov]

Thanks! Is a bug for universal. I try to fix this.

[yalesnikov]

Hello, I solved this problem to add that:

// START fix for dom manipulations
// This code was copied from stackOverFlow and don't analyzed
const domino = require('domino')
const fs = require('fs')
const path = require('path')
const template = fs.readFileSync('dist/browser/index.html').toString()
const win = domino.createWindow(template)

global['window'] = win
global['document'] = win.document
global['DOMTokenList'] = win.DOMTokenList
global['Node'] = win.Node
global['Text'] = win.Text
global['HTMLElement'] = win.HTMLElement
global['navigator'] = win.navigator
// END fir for dom manipulations

And also I used 'isBrowser' in my components where I use reach goal.

But I think that is not true solution for everyone. Maybe you should to add some conditions that general module doesn't start if it is server?

Sorry for my bad English

[vvasiloud]

Hello,

Many thanks for providing this plugin! I currently encounter the same issue and it seems the bug is open since a few years now. Are there any plans for a fix?

In the meanwhile I used the following (ugly) workaround to inject the service conditionally only on client side code.
Pre-rendered file generation works fine with Angular Universal by using:

export class AppComponent implements OnInit {

  private ym: NgxMetrikaService;

  constructor(private injector: Injector, @Inject(PLATFORM_ID) private platformId: Object) {

    // Client only code. Workaround for Angular Universal
    if (isPlatformBrowser(this.platformId)) {
      this.ym = <NgxMetrikaService>this.injector.get(NgxMetrikaService);
    }
}

I hope it helps.

Cheers.