Angular 4 - 服务器端渲染

Question

我有一个带有服务器端呈现的简单 angular 应用程序。我描述了我的组件的 ngOnInit，我在其中调用 http.get 方法。但是如果我在我的 Rest 端点上设置调试，我会看到这个方法被调用了两次。除了在第一次调用时我得到没有凭据的 HttpRequest，第二个调用 - 有凭据。为什么？通过 console.log 在控制台上我只看到一个电话。我怎样才能实现只调用一次并使用凭据？

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppComponent } from './app.component';
    import {HttpModule} from "@angular/http";
    import {FormsModule} from "@angular/forms";
    import {HttpClientModule} from "@angular/common/http";

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule.withServerTransition({appId: 'angular-universal'}),
        FormsModule,
        HttpClientModule,
        HttpModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.server.module.ts

 import { NgModule } from '@angular/core';
    import { ServerModule } from '@angular/platform-server';
    import { AppModule } from './app.module';
    import { AppComponent } from './app.component';

    @NgModule({
      imports: [
        ServerModule,
        AppModule
      ],
      bootstrap: [AppComponent]
    })
    export class AppServerModule { }

server.ts

    import 'reflect-metadata';
    import 'zone.js/dist/zone-node';
    import { platformServer, renderModuleFactory } from '@angular/platform-server'
    import { enableProdMode } from '@angular/core'
    import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
    import * as express from 'express';
    import { readFileSync } from 'fs';
    import { join } from 'path';

    const PORT = 4000;

    enableProdMode();

    const app = express();

    let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

    app.engine('html', (_, options, callback) => {
      const opts = { document: template, url: options.req.url };

      renderModuleFactory(AppServerModuleNgFactory, opts)
        .then(html => callback(null, html));
    });

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

    app.get('*.*', express.static(join(__dirname, '..', 'dist')));

    app.get('*', (req, res) => {
      res.render('index', { req,  preboot: true});
    });

    app.listen(PORT, () => {
      console.log(`listening on http://localhost:${PORT}!`);
    });

app.coponent.ts

    import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
    import {Hero} from "./hero";
    import {HttpClient} from "@angular/common/http";
    import 'rxjs/add/operator/map';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent implements OnInit{
      title = 'app';
      hero: Hero;
      constructor(private http: HttpClient){
      }

      ngOnInit(): void {
        this.http.get('http://localhost:8080/test', { withCredentials: true }).subscribe(data => {
          console.log("Init component");
          console.log(data);
        });
      }

    }

Answer 1

由于您的 API 是运行在另一台服务器 localhost:8000 上，我很确定使用了 CORS（Cross-Origin 资源共享）协议。

如果 POST 或 GET 中有任何 non-simple 内容或 headers，CORS 规范要求在 POST 或 GET 之前调用 OPTIONS。它也被称为 preflight request，请参阅 this link 了解更多信息。

因此，如果您查看 headers，您很可能会看到，第一个调用是 OPTIONS 调用，第二个调用是您的实际 GET。

关于您的问题：此行为是设计使然，如果您跨不同来源发出请求，则此行为是必要的。

Answer 2

如果您使用 angular universal 进行服务器端呈现，那么它将首先在服务器端呈现页面（第一个 GET 请求），然后在浏览器中再次呈现页面（第二个 GET 请求）。

有一种叫做 状态传输 的技术，它允许您 "cache" 服务器发出的请求，将它们传输到您的客户端并重新使用响应，所以您可以不需要再做一次。此功能目前正在 angular/universal 中实现，但您自己实现它相当容易（使用 HttpClient 拦截器）。

您还可以在代码中添加条件，例如您不会从您知道会失败的服务器端发出 API 请求（例如缺少授权）。

您可以这样做：

constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        // Client only code.
    ...
    }
    if (isPlatformServer(this.platformId)) {
        // Server only code.
    ...
    }
}

Answer 3

angular服务器端渲染一步步运行在评论下方

第 1 步：->ng add @ng-toolkit/universal

第 2 步：->npm install

第 3 步：->npm run build:prod

第 4 步：->ng build --prod

第 5 步：->npm run server

第6步：-> 运行cmd并写入命令->curl http://localhost:4000

我的服务器端angular应用程序https://exampreparation.study

Angular 4 - 服务器端渲染

Angular 4 - Server side rendering

angular-universal

angular