试图将简单的角度应用程序转换为通用支持的应用程序。
对所有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文件中有错误。
答案 0 :(得分:1)
对我来说,这是rxjs
的问题。我逐个注释地逐一查找,直到找到问题之一为止。我最终发现rxjs
的{{1}}引起了问题。希望有帮助!
答案 1 :(得分:0)
在我看来,某些页面正在加载,而其他页面则停留在空白屏幕上。我发现,如果在页面压缩时在服务器端执行未等待的操作,则页面将卡住。
例如,它是setTimeout
中的ngOnInit
。 (看起来服务器不知道如何处理-这是合乎逻辑的)。当我将setTimeout
移至页面的控件事件(如(change)
)时-页面启动正常!
答案 2 :(得分:0)
调试此问题的一种好方法是转到您的 app.component.html 和您的 app.component.ts 。注释掉加载另一个组件的每一行...然后在内部对每个组件模块进行操作,直到找出导致它的原因。我对新的@ angular / fire模块特别有一些问题,不得不注释掉我的文档以找到它。
此外,还有您要使用的商品 |在模板中多次异步,请确保使用 shareReplay(),如下所示:
this.user$ = this.afAuth.authState
.pipe(
shareReplay(),
switchMap(user => {
举个例子...