使用Angular Universal和Webpack Server时未定义@ ng-idle / core文档

Question

我的项目是Angular6。

我正在尝试使用Angular Universal：

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

我已经完成了所有设置。最后，当我运行node dist/server.js时，我遇到了以下问题。

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)

这里的问题是@ng-idle/core，它正在我的身份验证服务中使用。

作为角度通用设置的一部分，我提供了externals（github上针对角度通用的代码中缺少此功能）。

这是我当前的webpack.server.config.js文件

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'),
      {}
    )
  ]
}

在node_modules下，所有ngidle文件都位于@ ng-idle文件夹中。所以结构看起来像

应用程序模块

//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 { }

和auth服务具有以下两个导入

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

如何解决此问题？

Answer 1

在服务器上时，请尝试排除@ ng-idle代码。请参阅以下链接https://github.com/angular/universal/issues/860#issuecomment-349619247