标签: angular-universal

我按照教程将 Universal 集成到我们的 Angular 9 应用程序中。现在我们已经配置了 server.ts。

在每个教程中我都会看到：

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });

进而：

server.get(
        '*.*',
        express.static(distFolder, {
            maxAge: '1y',
        })
    );

如果我们像这样保留它，我想每个请求都会被缓存，/api 的内容也会被缓存。这是正确的吗？我们的应用程序有很多“产品页面”，其中库存和价格可能会经常变化。因此，我们需要始终拥有新鲜的库存和价格。因此，我不会缓存从“/api/”路径（或https://api.my-app.com “，如果需要绝对路径）中的 API 调用返回的服务器数据。保留所有内容如果我没记错的话，上面写的应该缓存所有内容。我做了一个测试，直接在数据库中更改价格，我希望看到旧的价格，但事实并非如此，我总是看到新鲜的。所以我怀疑是缓存机制不起作用。而且当我浏览组件时，我继续看到每个 api 调用（未缓存）

有人可以更好地解释一下这个机制吗？

另一个问题是：如果缓存有效，如何在节点中清除它？节点将所有内容缓存在内存中。我认为当我们停止节点时缓存会被清除。这是正确的吗？

这是我的包 json：

"scripts": {
    "ng": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng",
    "start": "npm run ng -- serve",
    "serve:server": "node ./dist-server/main.js",
    "serve:server:debug": "node --inspect ./dist-server/main.js",
    "start:server": "npm run build:server && node ./dist-server/main.js",
    "start:server:debug": "npm run build:server && node ./dist-server/main.js --inspect",
    "build": "npm run ng …

我正在开发将 SSR 与 Angular Universal 集成的 Angular 应用程序。在这个项目中，我们使用一些步进器的插件（bs-stepper）。问题是这个插件有一个多窗口引用，如下所示：

var matches = window.Element.prototype.matches;

我需要一种方法来验证它是否是浏览器，尝试了“检测”和“导航器”等多个选项。

我只是想将我的 Angular 应用程序从版本 15 更新到 16。一切都适用于 Angular。即使它使角度通用构建也没有错误。但是当我尝试使用npm run serve:ssr它时会抛出错误

类型错误：“instanceof”的右侧不是对象

最初我认为这可能是我的代码中的一些错误，但我删除了整个代码并仅保留具有简单标题的应用程序组件。它仍然抛出同样的错误。

服务器.ts

import { enableProdMode } from "@angular/core";
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
import 'zone.js/dist/zone-node';
const domino = require('domino');
const fs = require('fs');
const path = require('path');


import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { existsSync } from 'fs';
const dotenv = require('dotenv');
dotenv.config();
const distFolder = join(process.cwd(), 'dist/project-name/browser');
const template …

我试图将我的AngularJS应用程序转换为Angular 2 Universal应用程序(因为服务器端呈现).

https://github.com/angular/universal-starter

现在我需要存储全局变量,这些变量可以在普通的Angular 2应用程序中轻松实现(以下链接).

Angular 2全局变量

Angular 2 - 什么是存储全局变量(如身份验证令牌)的最佳方式,以便所有类都可以访问它们？

在普通的角度2应用程序中,您必须做的一件事是将您的全局服务传递给bootstrap.

我不认为你可以在Angular 2通用应用程序中做到这一点,除非我遗漏了一些东西.

我想存储用户数据并在整个应用程序中使用它.就像asp.net中的Session数据一样.而且这需要在不制作父子组件的情况下完成

如何在Angular 2 Universal App中存储全局变量？

谢谢Fahad Mullaji

仅供参考此问题与Angular Universal有关

我目前正在尝试创建一个缓存GET请求的HttpClient拦截器,并将缓存的响应作为可观察对象返回.

我试着遵循Angular拦截器设置的指南https://github.com/angular/angular/blob/master/aio/content/guide/http.md但我似乎无法让它工作,当我返回时除了next.handle()之外的Observable,订阅不会被触发.

这是一个说明它不起作用的plunker.https://plnkr.co/edit/QzVpuIoj3ZFXgHm7hVW2?p=preview

示例拦截器:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // if this is cached, return the cached response.
  return Observable.of({body: 'Test'});

  return next
    .handle(customReq)
    .do((ev: HttpEvent<any>) => {
      if (ev instanceof HttpResponse) {
        // Cache this response
      }
    });
 }

任何帮助将不胜感激.

我的目标最终是使用NG Universal的传输模块.如果我在拦截器中解决了这个问题,那么我应该让所有工作都准备好了.

编辑:我的假设是错误的.Angular HttpClient Interceptor Caching示例工作得非常好,它必须是Angular Universal,对我来说是失败的.(我使用Angular的工作示例更新了Plunker,以证明它适用于该情况).

这是我用于Angular Universal的拦截器.

constructor(private state: TransferState) {}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (request.method !== "GET") {
        return next.handle(request);
    }

    const STATE_KEY = makeStateKey(request.urlWithParams);
    const …

有人知道是否可以将 Angular Universal 部署到 Github Pages？有像angular-cli-ghpages这样的解决方案，但 IIUC 这些不会为 SEO 预渲染内容。

有什么方法可以根据要求设置状态代码，例如404、401、500？

我正在使用Angular6。有很多教程显示了解决方案，但是这些教程太旧了，根本无法使用。全部提供了关于不同server.ts文件的显示解决方案，该解决方案与Angular网站上显示的新文件无关。我能够渲染所有页面的服务器端。当URL中包含一些意外内容时，我将通过跳过位置更改选项将路由更改为404页面。

在调用404组件时，我要设置statuscode = 404。

服务器

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

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

import * as express from 'express';
import { join } from 'path';

// 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');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { …

为了使网站SEO友好，我们必须在中实现Server side rendering该应用程序Angular。

我已经阅读了许多有关服务器端渲染的文章。在阅读时，我了解两种类型的渲染。

1.静态服务器端渲染2.动态服务器端渲染

但是这是什么意思？从我读过的文章中我不了解这一点。仍然很困惑为我的应用选择哪一个。

所以我只想知道对于哪种类型的应用程序/网站，我们必须使用静态，对于哪种类型的应用程序/网站，我们必须使用动态服务器端渲染。

我已经创建了angular 7应用程序，现在我正尝试向它添加angular通用程序。因此，我遵循了以下步骤：

https://angular.io/guide/universal

在终端中输入以下内容：

ng add @nguniversal/express-engine --clientProject resume-app

然后我这样写：

npm run build:ssr && npm run serve:ssr

它不起作用，终端返回了很多错误：

错误：无法解析/Users/tomaszzmudzinski/Documents/Projects/Resume/resume-app/src/app/components/home/home.component.ts中的HomeComponent的所有参数：（？，？）。src / app / components / home / home.component.ts（2,24）：错误TS2307：找不到模块“ src / app / models / Resume”。src / app / components / home / home.component.ts（3,31）：错误TS2307：找不到模块“ src / app / services / resume.service”。src / app / components / home / home.component.ts（4,44）：错误TS2307：找不到模块“ src / app / models / GetBasicStatisticsResponse”。src / app / components / home / home.component.ts（5,35）：错误TS2307：找不到模块“ src / app / services / statistics.service”。src / …

有谁知道如何在 nginx 和通用角度中启用 gzip 文本压缩？我不知道从哪里开始做