网站搜索

typescript - Angular 17 SSR Express 服务器提供者


我尝试通过在 "server.ts" 文件中定义提供者,将我的请求和响应对象共享到 Angular 应用中。
无论如何,将它们注入到 app.component 中时,它们总是未定义,无论我是在服务器端还是客户端上下文中。

有人知道如何修复这种行为吗?可惜关于它的信息不多。

我没有在开发模式下运行这个应用,因为 Angular 目前在开发模式下会忽略 server.ts!我构建了它并启动了 Express 服务器。

我的代币看起来像这样:

export const REQUEST = new InjectionToken<Request>('REQUEST');
export const RESPONSE = new InjectionToken<Response>('RESPONSE');

我的服务器看起来是这样的:

  // All regular routes use the Angular engine
  server.get('*', (req, res, next) => {
    console.log('HI HI HI hi');
    const { protocol, originalUrl, baseUrl, headers } = req;
    /*const transferState = inject(TransferState);
    transferState.set(makeStateKey<any>('t'), JSON.stringify('hi'));*/
    commonEngine
      .render({
        bootstrap,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [
          { provide: RESPONSE, useValue: res },
          { provide: REQUEST, useValue: req }
          ],
      })
      .then((html) => res.send(html))
      .catch((err) => next(err));
  });

我的客户端注入了响应对象

  constructor(@Optional() @Inject(RESPONSE) private response: Response) {
    super();
  }
  ngOnClientInit() {
    console.log('RESPONSE', this.response);
    console.log('I am on client', this.communicationService.getValue('data'), this.token);
  }

不管我怎么尝试,我的响应总是为空。

我在谷歌上搜索并阅读了官方文档。

我期望这个令牌返回一个值!

答案#1

禁用预渲染并完美运行

答案#2

在 Angular 17.3 中,在 angular.json 中将 “prerender” 设置为 “false”,然后这将由 Node Express 服务器完成工作。

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:application",
      "options": {
        "outputPath": "dist/ng-cors",
        "index": "src/index.html",
        "browser": "src/main.ts",
        "tsConfig": "tsconfig.app.json",
        "server": "src/main.server.ts",
        "prerender": false,  <--!!!
        "ssr": {
          "entry": "server.ts"
        }
      },
    ..........