- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个 Angular 应用程序,我正在尝试使用 Angular 通用 (https://angular.io/guide/universal) 进行服务器端渲染,但它似乎不起作用。我捆绑了我的应用程序并通过 express 运行它,我点击了 http://localhost:4000它一直在加载,直到我从浏览器中看到 ERR_EMPTY_RESPONSE
我已经尝试了几乎所有方法,但没有运气!任何帮助将不胜感激
这是我的代码的详细信息
package.json
{
"name": "my-app",
"version": "3.0.0",
"author": "N/A",
"description": "N/A",
"scripts": {
"ng": "ng",
"start": "ng serve --port 8000 --host 0.0.0.0",
"build": "ng build",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng run my-app:server",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"test": "ng test",
"lint": "tslint ./src/**/*.ts -t verbose",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.2.0",
"@angular/common": "^7.2.0",
"@angular/compiler": "^7.2.0",
"@angular/core": "^7.2.0",
"@angular/forms": "^7.2.0",
"@angular/http": "^7.2.0",
"@angular/platform-browser": "^7.2.0",
"@angular/platform-browser-dynamic": "^7.2.0",
"@angular/router": "^7.2.0",
"@angular/upgrade": "^7.0.0",
"@nguniversal/common": "^6.0.0",
"@nguniversal/express-engine": "^7.0.0",
"@nguniversal/module-map-ngfactory-loader": "^7.1.0",
"@types/jquery": "^3.3.28",
"@types/swiper": "^4.4.1",
"angular-in-memory-web-api": "^0.6.0",
"angular2-text-mask": "^9.0.0",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"express": "^4.16.4",
"fullcalendar": "^3.10.0",
"moment": "^2.23.0",
"ng-fullcalendar": "^1.7.1",
"ngx-google-places-autocomplete": "^2.0.3",
"ngx-infinite-scroll": "^7.0.1",
"ngx-slick": "^0.2.1",
"reflect-metadata": "^0.1.10",
"replace-in-file": "^3.4.3",
"rxjs": "^6.3.3",
"swiper": "^4.4.6",
"zone.js": "^0.8.27"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.12.1",
"@angular/cli": "~7.2.1",
"@angular/compiler-cli": "^7.2.0",
"@angular/language-service": "^7.2.0",
"@angular/platform-server": "^7.2.4",
"@compodoc/compodoc": "^1.1.7",
"@types/jasmine": "~3.3.4",
"@types/jasminewd2": "~2.0.6",
"@types/node": "~10.12.17",
"codelyzer": "~4.5.0",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.4",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.1",
"ts-node": "~7.0.1",
"tslint": "^5.12.1",
"typescript": "~3.2.2",
"webpack-cli": "^3.2.3",
"karma-phantomjs-launcher": "^1.0.2",
"lodash": "^4.16.2",
"phantomjs-prebuilt": "^2.1.7",
"ts-loader": "^4.5.0"
}
}
src/app/app.module.ts
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { TransferHttpCacheModule } from '@nguniversal/common';
// Modules
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { ConfigModule } from './configs/config.module';
// Routing
import { AppRoutingModule } from './app-routing.module';
// Components
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({appId: 'my-app'}),
BrowserTransferStateModule,
TransferHttpCacheModule,
CommonModule,
AppRoutingModule,
HttpClientModule,
CoreModule,
SharedModule,
ConfigModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
src/app/app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule,
ServerTransferStateModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppServerModule {}
main.server.ts
export { AppServerModule } from './app/app.server.module';
tsconfig.server.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
],
"angularCompilerOptions": {
"entryModule": "app/app.server.module#AppServerModule"
}
}
angular.json
...
"server" : {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"sourceMap": false
}
}
...
在这些更改之后,我能够使用 ng build --prod && ng run my-app:server
成功捆绑浏览器、服务器分发版
这是我的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 { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
const DIST_FOLDER = join(process.cwd(), 'dist');
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
global['CSS'] = null;
global['Event'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
Object.defineProperty(win.document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true
};
},
});
// Express server
const app = express();
const PORT = process.env.PORT || 4000;
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));
// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
// 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 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'] },
target: 'node',
mode: 'none',
// this makes sure we includes node_modules and other 3rd party libraries
externals: [/(node_modules|main(\\|\/)..*(\\|\/).js)/],
output: {
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: [
// 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'),
{}
),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
};
npm run build:ssr && npm run serve:ssr -> http://localhost:4000 -> 继续加载 -> ERR_EMPTY_RESPONSE
最佳答案
我能够通过确保我的 Angular 应用程序与平台无关来解决这个问题,即通过制作特定于浏览器的代码、浏览器 API 方法或浏览器类型,例如 window
、document
, 或 localStorage
仅在浏览器中运行。
例如:if (isPlatformBrowser(this.platformId)) {//客户端代码 }
关于Angular Universal Express 服务器不断加载并因 ERR_EMPTY_RESPONSE 而失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54700345/
我正在处理一些奇怪的事情..我正在设置 phpmailer,如果出现错误,我通常会得到错误 echo "Mailer Error: " . $mail->ErrorInfo; 实际上,如果一切正常,页
我正在关注 django 教程:虚拟环境中的 1.8 版、Ubuntu 10.04、python 3.4。我似乎在我的 Ubuntu 服务器上创建了一个 django 项目 (yatest) 就好了,
我正在本地开发一个进行API调用的Web应用程序。一些API调用突然停止工作,而其他API继续工作。如果我直接在浏览器中访问api端点,则它总是第一次返回: This page isn’t worki
如果我通过首先创建镜像然后运行它( docker build --rm -t myApp + docker run -p 80:80 -P -d myApp )来启动 Docker 容器,则一切正常。
您好,我为我的一位客户开发了在线考试。已经完成了,但是有一个问题给我带来了很大的麻烦。当有人开始测试并遇到一些问题时,突然网页刷新并出现名为 ERR_EMPTY_RESPONSE 的错误。 “此页面无
我正在尝试运行 webpack-dev-server,但是当我转到 http://localhost:8080/ 时浏览器返回 No data received ERR_EMPTY_RESPONSE
我是 Docker 新手,刚刚迈出了第一步。 我想和 docker 一起玩一点,然后为 yii 配置一个 Dockerfile: FROM php:7.2.3-apache RUN curl -sS
我在通过SFTP上传文件时遇到问题。这是我的代码: $connection = ssh2_connect("ftp.mysite.com", 22); ssh2_auth_password($conn
当我尝试访问我的网站时,它显示一个错误 This Page Isn't Working www.abcdef.com didn't send any data ERR_EMPTY_RESPONSE 并
我想从数据库中实时获取数据,但显示错误。Ajax 代码在这里: window.setInterval( function() { checkCustomer(); check.
使用VScode编写NodeJS 但要检查一下,本地主机没有正确响应,它说“该页面没有发送任何数据。我尝试到处寻找并更改所有可能的设置。 恢复了 Chrome 设置清除缓存、清除历史记录、更改端口号、
我在托管 Laravel 应用程序项目的服务器上面临一个非常严重的问题。我在那里托管了一些其他项目。有时我在浏览器上看到“ERR_EMPTY_RESPONSE”错误。但同时其他项目运行良好。如果我重新
我正在使用 gorethink 驱动程序,我在模型中编写了这样一个查询函数 func GetQuotesByUser(idUser string) []Quote{ ids:=GetQuote
当我单击指向由 Web 服务生成的 PDF 的链接时收到错误消息。除了我将输出路径作为参数传递的事实之外,我不知道 Web 服务是如何构建文件的: Dim strPDF As String = Ser
我在 Chrome 中遇到以下错误 this网址。 Failed to load resource: net::ERR_EMPTY_RESPONSE http://upload.wikimedia.o
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我已经开始在基于wordpress的项目中遇到问题。这个问题很奇怪。 这里是描述:当我在网站上搜索任何以字母d开头的内容时,它都可以正常工作-但是当搜索以字母d开头的内容时,我得到了Error 324
在过去的几个小时里我一直在试图解决这个问题,但我陷入了困境。 我有一个非常简单的 Dockerfile,如下所示: FROM alpine:3.6 COPY gempbotgo / COPY conf
这是我的 Dockerfile: # CentOs base image FROM centos:centos6.8 # install python, pip, apache and other p
我正在为一所学校开发一个小型 CMS/社交网络,非常复杂,几乎完全使用 AJAX 运行。我的问题是随机调用被阻止并且出现浏览器错误 net::ERR_EMPTY_RESPONSE(Chrome、Fir
我是一名优秀的程序员,十分优秀!