Error with Angular Universal

yalesnikov commented 4 years ago

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 commented 4 years ago

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

yalesnikov commented 4 years ago

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 commented 3 years ago

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.

kolkov / ngx-metrika

Error with Angular Universal #7