Angular Universal Bundle 不断加载空白页面

Question

正在尝试将简单的 Angular 应用程序转换为通用支持的应用程序。

是否进行了所有必需的更改，例如添加了对所有 DOM 元素(例如窗口、导航器、settimeout 等)的检查

一旦我运行命令 npm run build:ssr && npm runserve:ssr 它将成功构建 bundle 并显示在终端中

Node Express 服务器正在监听 http://localhost:4000

但是在端口 4000 上的浏览​​器中加载时，它会持续加载很长时间。

尝试在几乎每一步添加控制台，这似乎工作正常。

服务器.ts

// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
global['Event'] = null;

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
        provideModuleMap(LAZY_MODULE_MAP)
    ]
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

// Server static files from /assets
app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
    res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

webpack.server.config.js

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

module.exports = {
    entry: { server: './server.ts' },
    resolve: {
        extensions: ['.js', '.ts'],
        mainFields: ['main']
    },
    target: 'node',
    mode: 'none',
    // this makes sure we include node_modules and other 3rd party libraries
    externals: [/node_modules/],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [{ test: /\.ts$/, loader: 'ts-loader' }, {
            test: /\.(ts|js)$/,
            loader: 'regexp-replace-loader',
            options: {
                match: {
                    pattern: '\\[(Mouse|Keyboard)Event\\]',
                    flags: 'g'
                },
                replaceWith: '[]',

            }
        }]
    },
    plugins: [
        // Temporary Fix for issue: https://github.com/angular/angular/issues/11580
        // for 'WARNING Critical dependency: the request of a dependency is an expression'
        new webpack.ContextReplacementPlugin(
            /(.+)?angular(\\|\/)core(.+)?/,
            path.join(__dirname, 'src'), // location of your src
            {} // a map of your routes
        ),
        new webpack.ContextReplacementPlugin(
            /(.+)?express(\\|\/)(.+)?/,
            path.join(__dirname, 'src'), {}
        )
    ]
};

我使用的是 Angular v6.1.0。

困了这么久，有人可以帮帮我吗？

PS:尝试了新的应用程序/项目，工作正常。所以错误可能在我的 server.ts 文件中。

Answer 1

对我来说，这是 rxjs 的问题。我通过逐个组件地注释掉它来追踪它，直到找到问题所在。我最终发现 rxjs 的 interval 导致了这个问题。希望有帮助!