Question

试图将简单的角度应用程序转换为通用支持的应用程序。

对所有DOM元素（例如窗口，导航器，settimeout等）进行了所有必需的更改（例如添加检查）。

一旦我运行命令npm run build:ssr && npm run serve:ssr，它将成功构建捆绑包并显示在终端中

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

但是在通过端口4000在浏览器中加载时，它会持续加载一段时间。

试图在似乎正常运行的几乎所有步骤中添加控制台。

Server.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的{{1}}引起了问题。希望有帮助！

Answer 2

在我看来，某些页面正在加载，而其他页面则停留在空白屏幕上。我发现，如果在页面压缩时在服务器端执行未等待的操作，则页面将卡住。例如，它是setTimeout中的ngOnInit。（看起来服务器不知道如何处理-这是合乎逻辑的）。当我将setTimeout移至页面的控件事件（如(change)）时-页面启动正常！

Answer 3

调试此问题的一种好方法是转到您的 app.component.html 和您的 app.component.ts 。注释掉加载另一个组件的每一行...然后在内部对每个组件模块进行操作，直到找出导致它的原因。我对新的@ angular / fire模块特别有一些问题，不得不注释掉我的文档以找到它。

此外，还有您要使用的商品 |在模板中多次异步，请确保使用 shareReplay（），如下所示：

    this.user$ = this.afAuth.authState
      .pipe(
        shareReplay(),
        switchMap(user => {

举个例子...

Angular Universal Bundle保持加载空白页

3 个答案: