angular - 使用 Angular Universal 和 Webpack Server 时未定义 @ng-idle/core 文档
问题描述
我的项目是 Angular 6。
我正在尝试使用 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';
我该如何解决这个问题?
解决方案
在服务器上尝试排除 @ng-idle 代码。请参阅以下链接https://github.com/angular/universal/issues/860#issuecomment-349619247
推荐阅读
- excel - 导出到 Excel 时,最后一位数字更改为零
- ignite - 未找到 Ignite Web 代理 jdbc 驱动程序
- jenkins - 对像 Jenkins 这样的服务器实施基于 Active Directory 的安全性有什么好处
- mysql - 使用现有数据库在 ASP.NET Core 上开始使用 EF Core
- python - 最小交换对无序连续整数进行排序
- linux - kubernetes和cron的关系
- c# - 如何从嵌套的 ConcurrentDictionary 中删除项目?
- angular - 如何从类装饰器将回调函数的“this”对象设置为容器组件
- c# - 通过依赖注入将配置传递给 webjobs
- python - 如何找到机器人所有者