NG Universal app failed to start #2008

boskiv · 2019-10-08T12:12:12Z

Issue type

I'm submitting a ... (check one with "x")

bug report
feature request

Issue description

Current behavior:

After adding a universal module to ng, the server failed to start
Expected behavior:

Starts fine
Steps to reproduce:

ng new uniapp -S
cd uniapp
ng add @nebular/theme
ng add @nestjs/ng-universal

Related code:
Sample app: https://github.com/boskiv/nebular-universal

[nodemon] starting `node dist/server-app/main.js`
/Users/i_skiridomov/Documents/Projects/koko/universal-demo/node_modules/intersection-observer/intersection-observer.js:724
}(window, document));
  ^

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/i_skiridomov/Documents/Projects/koko/universal-demo/node_modules/intersection-observer/intersection-observer.js:724:3)
    at Module._compile (internal/modules/cjs/loader.js:945:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:962:10)
    at Module.load (internal/modules/cjs/loader.js:798:32)
    at Function.Module._load (internal/modules/cjs/loader.js:711:12)
    at Module.require (internal/modules/cjs/loader.js:838:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at /Users/i_skiridomov/Documents/Projects/koko/universal-demo/node_modules/@nebular/theme/bundles/theme.umd.js:2:469
    at Object.<anonymous> (/Users/i_skiridomov/Documents/Projects/koko/universal-demo/node_modules/@nebular/theme/bundles/theme.umd.js:5:2)
    at Module._compile (internal/modules/cjs/loader.js:945:30)
[nodemon] app crashed - waiting for file changes before starting...

Other information:

npm, node, OS, Browser

➜  universal-demo git:(master) node --version
v12.11.1
➜  universal-demo git:(master) npm --version
6.11.3
➜  universal-demo git:(master)

Angular, Nebular

"@angular/common": "8.2.9"
"@nestjs/common": "6.8.2",
"@nebular/theme": "4.4.0",

The text was updated successfully, but these errors were encountered:

tayambamwanza · 2019-10-10T05:03:22Z

I just got this last night as well

niklasravnsborg · 2019-10-10T07:40:45Z

I also have the same problem :/

beshad · 2019-10-14T22:02:02Z

same problem here, backend is NestJS
ReferenceError: window is not defined at Object.<anonymous> (fullstack-nestjs-angular-boiletplate/node_modules/intersection-observer/intersection-observer.js:724:3)

beshad · 2019-10-15T01:32:52Z

my problem was the SSR using NESTJS, solved it by adding below to my app.module.ts in NestJS. basically mimicking the windows object

const domino = require('domino')
const fs = require('fs')
const template = fs.readFileSync(join(BROWSER_DIR , 'index.html')).toString()
const win = domino.createWindow(template)

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

tayambamwanza · 2019-10-15T04:04:22Z

@beshad Which file did you as this to, can you provide a sample? I tried using applyDomino() nest is utility in app.module for the server and it didn't work.

beshad · 2019-10-15T19:30:37Z

@beshad Which file did you as this to, can you provide a sample? I tried using applyDomino() nest is utility in app.module for the server and it didn't work.

@tayambamwanza no that didn't work for me either, add this code to the app.module.ts:

const BROWSER_DIR = join(process.cwd(), 'dist/browser')

const domino = require('domino')
const fs = require('fs')
const template = fs.readFileSync(join(BROWSER_DIR , 'index.html')).toString()
const win = domino.createWindow(template)

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

and then have a viewsPath in AngularUniverseModule:

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      bundle: require('../server/main'),
      liveReload: true,
      viewsPath: BROWSER_DIR
    }),
    MongooseModule.forRoot('mongodb://localhost/fullstack-nestjs-angular-boilerplate',
      {
        useNewUrlParser: true,
        useUnifiedTopology: true
      }),
    UserModule,
    AuthModule
  ],
  controllers: [],
  providers: []
})
export class ApplicationModule { }

my boiletplate project is here: https://github.com/beshad/fullstack-nestjs-angular-boilerplate

tayambamwanza · 2019-10-16T02:05:11Z

@beshad I actually replaced nb with angular material because I was on a deadline, next project I'll try Nebular again and let you know.

boskiv · 2019-11-25T13:19:25Z

Does not work with latest versions

├─ @nestjs/common@6.10.1
├─ @nestjs/core@6.10.1
├─ @nestjs/ng-universal@2.0.1
|─ @nebular/eva-icons@4.5.0
├─ @nebular/theme@4.5.0

$ node dist/server
/Users/i_skiridomov/Projects/koko/koko-nebular/node_modules/intersection-observer/intersection-observer.js:724
}(window, document));
  ^

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/i_skiridomov/Projects/koko/koko-nebular/node_modules/intersection-observer/intersection-observer.js:724:3)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at /Users/i_skiridomov/Projects/koko/koko-nebular/node_modules/@nebular/theme/bundles/theme.umd.js:2:469
    at Object.<anonymous> (/Users/i_skiridomov/Projects/koko/koko-nebular/node_modules/@nebular/theme/bundles/theme.umd.js:5:2)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

boskiv · 2019-11-25T13:22:17Z

Works after app.module.ts update

import { Module } from '@nestjs/common';
import { AngularUniversalModule } from '@nestjs/ng-universal';
import { join } from 'path';

const BROWSER_DIR = join(process.cwd(), 'dist/browser')

const domino = require('domino')
const fs = require('fs')
const template = fs.readFileSync(join(BROWSER_DIR , 'index.html')).toString()
const win = domino.createWindow(template)

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

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      viewsPath: BROWSER_DIR,
      bundle: require('../server/main'),
      liveReload: true
    })
  ]
})
export class ApplicationModule {}

anvial · 2020-07-22T16:16:04Z

Fellows,

After modifying server/app.module.ts, I've another error:

ERROR NAMESPACE_ERR: NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML

Anybody face with this?

danieldanielecki · 2020-10-19T18:49:00Z

Works after app.module.ts update

import { Module } from '@nestjs/common';
import { AngularUniversalModule } from '@nestjs/ng-universal';
import { join } from 'path';

const BROWSER_DIR = join(process.cwd(), 'dist/browser')

const domino = require('domino')
const fs = require('fs')
const template = fs.readFileSync(join(BROWSER_DIR , 'index.html')).toString()
const win = domino.createWindow(template)

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

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      viewsPath: BROWSER_DIR,
      bundle: require('../server/main'),
      liveReload: true
    })
  ]
})
export class ApplicationModule {}

The listing doesn't work for me on Angular 10 and @nestjs/ng-universal version 4.0.1 (latest). I can see that your app.module.ts has the bundle and that the Angular in that project was 7.2.X.

@boskiv @tayambamwanza were you able to get rid of this error after the recent updates in ng-universal and the fact that bundle is no longer required?

boskiv · 2020-10-19T19:33:10Z

I've repeated steps with recent versions. Look likes it starts now.

➜ yarn serve:ssr
yarn run v1.22.10
$ node dist/uniapp/server/main.js
(node:82461) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[Nest] 82461   - 10/19/2020, 2:31:28 PM   [NestFactory] Starting Nest application...
[Nest] 82461   - 10/19/2020, 2:31:28 PM   [InstanceLoader] AppModule dependencies initialized +20ms
[Nest] 82461   - 10/19/2020, 2:31:28 PM   [InstanceLoader] AngularUniversalModule dependencies initialized +1ms
[Nest] 82461   - 10/19/2020, 2:31:28 PM   [NestApplication] Nest application successfully started +5ms

danieldanielecki · 2020-10-21T07:03:49Z

I've repeated steps with recent versions. Look likes it starts now.

➜ yarn serve:ssr
yarn run v1.22.10
$ node dist/uniapp/server/main.js
(node:82461) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[Nest] 82461   - 10/19/2020, 2:31:28 PM   [NestFactory] Starting Nest application...
[Nest] 82461   - 10/19/2020, 2:31:28 PM   [InstanceLoader] AppModule dependencies initialized +20ms
[Nest] 82461   - 10/19/2020, 2:31:28 PM   [InstanceLoader] AngularUniversalModule dependencies initialized +1ms
[Nest] 82461   - 10/19/2020, 2:31:28 PM   [NestApplication] Nest application successfully started +5ms

@boskiv thanks, I guess my issue is slightly different and posted it on StackOverflow: https://stackoverflow.com/questions/64458225/angular-universal-external-dependencies-issues-webpack-server-config-js-nodeex

niklasravnsborg mentioned this issue Oct 10, 2019

ReferenceError: window is not defined nestjs/ng-universal#163

Closed

yggg added bug module:universal P1: urgent labels Oct 10, 2019

yggg added this to the 5.0.0 milestone Oct 10, 2019

denStrigo mentioned this issue Oct 31, 2019

fix(universal): update dependencies to support universal environment #2057

Merged

2 tasks

yggg closed this as completed in #2057 Nov 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NG Universal app failed to start #2008

NG Universal app failed to start #2008

boskiv commented Oct 8, 2019 •

edited

Loading

tayambamwanza commented Oct 10, 2019

niklasravnsborg commented Oct 10, 2019

beshad commented Oct 14, 2019 •

edited

Loading

beshad commented Oct 15, 2019 •

edited

Loading

tayambamwanza commented Oct 15, 2019

beshad commented Oct 15, 2019 •

edited

Loading

tayambamwanza commented Oct 16, 2019

boskiv commented Nov 25, 2019

boskiv commented Nov 25, 2019

anvial commented Jul 22, 2020

danieldanielecki commented Oct 19, 2020

boskiv commented Oct 19, 2020

danieldanielecki commented Oct 21, 2020

NG Universal app failed to start #2008

NG Universal app failed to start #2008

Comments

boskiv commented Oct 8, 2019 • edited Loading

Issue type

Issue description

Other information:

tayambamwanza commented Oct 10, 2019

niklasravnsborg commented Oct 10, 2019

beshad commented Oct 14, 2019 • edited Loading

beshad commented Oct 15, 2019 • edited Loading

tayambamwanza commented Oct 15, 2019

beshad commented Oct 15, 2019 • edited Loading

tayambamwanza commented Oct 16, 2019

boskiv commented Nov 25, 2019

boskiv commented Nov 25, 2019

anvial commented Jul 22, 2020

danieldanielecki commented Oct 19, 2020

boskiv commented Oct 19, 2020

danieldanielecki commented Oct 21, 2020

boskiv commented Oct 8, 2019 •

edited

Loading

beshad commented Oct 14, 2019 •

edited

Loading

beshad commented Oct 15, 2019 •

edited

Loading

beshad commented Oct 15, 2019 •

edited

Loading