Question

我将angular Universal和node.js开发为服务器应用程序。我按照所有人的建议做所有事情，包括官方文档。

通常，在加载客户端应用程序时，它将对API执行ajax查询。 API放在此服务器上。我的目标是避免这种ajax调用，并避免已经从服务器获取带有此数据的页面。

我像典型示例一样尝试：

ngOnInit() {
      let myTransferStateKey = makeStateKey<any>("myDatas");

      if(this.transferState.hasKey(myTransferStateKey)) {
          this.result = this.transferState.get(myTransferStateKey, {});
          this.transferState.remove(myTransferStateKey);
      } else {
          this.http.get("link-to-api").subscribe(response => {
              this.result = response;
              this.transferState.set(myTransferStateKey, this.result);
          });
      }
  }

据我了解，以下代码将在服务器端执行：

      this.http.get("link-to-api").subscribe(response => {
          this.result = response;
          this.transferState.set(myTransferStateKey, this.result);
      });

那么服务器端将对自己的服务器执行真正的http查询？真丑！理想情况下，我应该只在服务器上使用服务并将数据传递给视图，然后服务器会将HTML呈现给客户端。希望您知道我的意思。

这也是我的server.ts，您最有可能在网络上看到的典型代码：

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import { AppServerModule } from './src/main.server';

import {ngExpressEngine} from '@nguniversal/express-engine';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist', 'calendar');

// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

const domino = require('domino');

const window = domino.createWindow(template);

global['window'] = window;
global['document'] = window.document;

global['requestAnimationFrame'] = cb => cb();

app.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
}));

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(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});


// Start up the Node server
app.listen(PORT, () => {
    console.log(`Node server listening on http://localhost:${PORT}`);
});

那么如何优雅地解决它？我喜欢这种通用的方法和服务器端渲染，但现在看来对我来说还是很潮湿的。

我使用的是angular 9版本，node.js 12版本...

让我阐明并提出想法和问题：如何为客户端和服务器使用单一服务（相同的类/文件等）？唯一的区别是服务器将直接使用服务，但是客户端需要获取数据时-将使用对API的ajax请求，并且在服务器端-将使用此服务类）我必须使其与服务器一起使用。 ts或类似的东西...

Answer 1

因此，我认为您与Angular Universal与NodeJS应用程序混为一谈。

Angular Universal呈现服务器上请求的 first 页面，从那时起，当您在站点周围单击时，它就像常规的Angular应用程序一样工作。只是给人一种幻觉，即第一个“绘画”确实非常快，因为您几乎是在访问该网站后就将整个页面完全渲染了，而不是一个常规的Angular应用程序，在该应用程序中您得到的是空白页，然后是订阅返回您填写的页面等。

如果您希望事情总是在服务器端呈现，那么您可能正在考虑做一个标准的Express NodeJS应用程序，该应用程序返回HTML视图，而不是Angular Universal。

如果您真的仍然想使用Universal。然后，您可以使用名为“ isPlatformBrowser”和“ isPlatformServer”的角度方法来检查您是在服务器上运行还是在浏览器上运行，然后可以使用逻辑来调用API或直接获取数据。

例如：

export class PostfeedComponent implements OnInit {

  constructor(@Inject(PLATFORM_ID) private platform: Object) { }

  ngOnInit() {
      if (isPlatformBrowser(this.platform)) {
        // here you can run any browser specific code
      } else {
         // Runs only on server
      }
  }
}

更多信息：

将数据从服务器端传递到客户端，而无需http调用

1 个答案: