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'),
{}
)
]
}
Under node_modules, all ngidle files are inside @ng-idle folder. So the structure looks like
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 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?
