@ng-idle/core document is not defined when using Angular Universal and Webpack Server

[tahirjadoon]

My project is Angular 6.

I am trying to use Angular Universal:

https://github.com/angular/angular-cli/wiki/stories-universal-rendering

I have done all the setup. At the end when i run node dist/server.js, i get into following issue.

C:\Projects\TestApp\ClientApp>node dist/server.js
C:\Projects\TestApp\ClientApp\dist\server.js:151261
        return _super.call(this, document.documentElement, events, options) || this;
                                 ^

ReferenceError: document is not defined
    at new DocumentInterruptSource (C:\Projects\TestApp\ClientApp\dist\server.js:151261:34)
    at createDefaultInterruptSources (C:\Projects\TestApp\ClientApp\dist\server.js:151226:13)
    at Object.<anonymous> (C:\Projects\TestApp\ClientApp\dist\server.js:151229:32)
    at __webpack_require__ (C:\Projects\TestApp\ClientApp\dist\server.js:20:30)
    at Object.@ng-idle/core (C:\Projects\TestApp\ClientApp\dist\server.js:131281:18)
    at __webpack_require__ (C:\Projects\TestApp\ClientApp\dist\server.js:124539:30)
    at Object../src/app/resources/services/auth.service.ts (C:\Projects\TestApp\ClientApp\dist\server.js:130182:14)
    at __webpack_require__ (C:\Projects\TestApp\ClientApp\dist\server.js:124539:30)
    at Object../src/app/app.component.ts (C:\Projects\TestApp\ClientApp\dist\server.js:125087:22)
    at __webpack_require__ (C:\Projects\TestApp\ClientApp\dist\server.js:124539:30)

The issue here is @ng-idle/core which is being used inside my auth service.

As part of the angular universal setup, i have provided externals (which is missing from the code on the github for angular universal).

So here is my current webpack.server.config.js file

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'none',
  entry: {
    server: './server.ts',
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  //this makes sure we include node_modules and other 3rd party libraries
  externals: [/(node_modules|main\..*\.js)/],
  optimization: {
    minimize: false
  },
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
        parser: { system: true },
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
}

and the app.module

//for more info see: https://github.com/HackedByChinese/ng2-idle and https://hackedbychinese.github.io/ng2-idle/
import { NgIdleKeepaliveModule } from '@ng-idle/keepalive'; // this includes the core NgIdleModule but includes keepalive providers for easy wireup

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Add .withServerTransition() to support Universal rendering.
    // The application ID can be any identifier which is unique on
    // the page.
    BrowserModule.withServerTransition({ appId: 'mwk-webapp' }),
    BrowserAnimationsModule,
    RouterModule,
    AppCoreModule,
    NgIdleKeepaliveModule.forRoot()
  ],
  //Title is the service by angular, using it for putting in document titles, check app.component
  providers: [ Title ], 
  bootstrap: [AppComponent]
})
export class AppModule { }

and the auth service has the following two imports.

import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
import { Keepalive } from '@ng-idle/keepalive';

How can i fix this issue?

[ptrzyna]

Try excluding the @ng-idle code when on the server. See following link angular/universal#860 (comment)

[knightyau]

Had this problem when i include NgIdleKeepaliveModule in app.module. Any solution?

dist...\server\main.js:1035
super(document.documentElement, events, options);
^
ReferenceError: document is not defined