Question

我有一个Angular应用程序，我正在尝试使用Angular Universal（https://angular.io/guide/universal）进行服务器端渲染，但它似乎不起作用。我捆绑了我的应用程序并通过Express运行它，我打了http://localhost:4000，它一直加载，直到从浏览器看到ERR_EMPTY_RESPONSE

我几乎尝试了所有事情，但是没有运气！任何帮助将不胜感激

这是我的代码的详细信息

package.json

public class Person
{
    public string Name { get; set; }
}

public List<Person> Exec()
{
    var persons = new List<Person>();

    var results = New DataTable();

    // methodToExecuteSP is = public DataSet 
    results = methodToExecuteSP;

    foreach (DataRow row in results.Rows)
    {
        result.Add(new Person { Name = row[“Name”].ToString() });
    }

    return persons;
}

<tbody>
<% foreach (var person in Exec()) { %>
    <tr><td><%=person.Name %> </td></tr>
<% } %>
</tbody>

src / app / app.module.ts

public List<string> Exec()
{
    var names = new List<string>();

    var results = New DataTable();

    // methodToExecuteSP is = public DataSet 
    results = methodToExecuteSP;

    foreach (DataRow row in results.Rows)
    {
        result.Add(row[“Name”].ToString());
    }

    return names;
}

<tbody>
<% foreach (var name in Exec()) { %>
    <tr><td><%=name%> </td></tr>
<% } %>
</tbody>

src / app / app.server.module.ts

{
  "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"
  }
}

main.server.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 {}

tsconfig.server.json

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 {}

angular.json

export { AppServerModule } from './app/app.server.module';

完成这些更改后，我能够使用{ "extends": "../tsconfig.json", "compilerOptions": { "module": "commonjs", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ], "angularCompilerOptions": { "entryModule": "app/app.server.module#AppServerModule" } }

来成功捆绑浏览器和服务器发行版

这是我的 server.ts

...
     "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
          }
        }
...

和 webpack.server.config.js

ng build --prod && ng run my-app:server

npm run build：ssr && npm run serve：ssr-> http://localhost:4000->持续加载-> ERR_EMPTY_RESPONSE

Answer 1

我能够通过确保我的角度应用程序与平台无关来解决此问题，即通过使浏览器特定的代码，浏览器API方法或浏览器类型（例如window，document或{{1}）得以解决}仅在浏览器中运行。

例如：localStorage

Answer 2

要对此进行补充，您还需要使用针对平台浏览器的检查将setTimeout和location包装起来。我发现this gist可以让您了解如何设置所有内容。

Angular Universal Express服务器不断加载并由于ERR_EMPTY_RESPONSE而失败

2 个答案: