angular Document how to properly set status codes when using SSR

bq9c1y66  于 6个月前  发布在  Angular
关注(0)|答案(9)|浏览(49)

描述你遇到的问题

对于像404、403、500等页面,你需要设置它们各自的状态码,否则它们会被当作200处理。然而,文档中没有任何地方提到这一点。

输入出现问题的主题的URL

https://angular.dev/guide/ssr

描述你在文档中寻找的内容

在使用SSR时,服务器响应上设置状态码的代码示例和描述。

描述导致你遇到问题的行为

我正在从v16升级到v17,随之而来的是新的方法来处理这个问题。然而,你不得不深入研究问题,或者在我的案例中,查找一个显示迁移运行后代码应该是什么样子的新迁移提交(在我的案例中甚至没有运行,所以不得不手动进行)。
即使经过所有这些,代码在生产环境中仍然无法正常工作。我在 server.ts 中提供了请求和响应注入令牌,然后将其注入到我的404页面组件中设置状态,但在导航到404路由后,状态始终为200。
你可以在这里看到这段代码:
https://stackoverflow.com/questions/77619409/angular-17-ssr-setting-status-on-response-doesnt-work-despite-using-injectionto

描述你希望解决这个问题的体验

我希望SSR的文档页面能够正确且详尽地描述如何添加这个功能(包括代码示例),以及它是如何工作的。因为现在很难理解要做什么,我已经看到了关于这个问题的多个问题和讨论。如果文档只是简单地说明如何做到这一点,将会节省很多人的时间和沮丧。

hkmswyz6

hkmswyz61#

你好@chriswoodie,stackoverflow问题中提供的代码在ng新应用中是有效的。因此,问题可能是其他方面的问题。

请提供一个最小复现。你能设置一个最小复现吗?

你可以在这里阅读为什么需要这个。创建一个最小复现的好方法是通过ng new repro-app创建一个新的应用,并添加尽可能少的代码来显示问题。然后你可以将此仓库推送到github并在这里链接。

这可能与你的目录结构有关,所以准确地诊断这个问题非常重要。

jrcvhitl

jrcvhitl2#

@alan-agius4 Here you go: https://github.com/chriswoodie/status-repro
Steps to reproduce:

  1. Clone repo
  2. npm install
  3. ng build sdk
  4. ng build
  5. npm run serve:ssr:repro-app
    Go to http://localhost:4000/404 and check network status for the 404 page, you will see a 200 status instead of 404.
    Turns out it's because of prerendering. If you set this to false for the project in angular.json the status code will be 404 , which is correct.
    Not sure if this is a bug or intended behaviour?
wj8zmpe1

wj8zmpe13#

这是使用预渲染时的缩进行为,因为没有请求/响应信息。如果一个页面依赖于此类信息,则需要为该页面选择退出预渲染。

lkaoscv7

lkaoscv74#

@alan-agius4 明白了,我认为这应该在文档中提到,因为我之前对此一无所知。这将节省我数天的时间进行调试,其他人也可能从中受益。

aor9mmx1

aor9mmx15#

@alan-agius4 另外,如何从预渲染中排除一个页面?在文档中也找不到。我只找到了手动指定要包含哪些路由的选项,而不是排除。

pgky5nke

pgky5nke6#

目前,唯一的做法是禁用自动路由发现。https://angular.io/guide/prerendering#build-options-for-prerender

6fe3ivhb

6fe3ivhb7#

实际上,关于SSR的一些事情需要记录下来,例如自从从@nguniversal/express-engine迁移到@angular/ssr以来,express令牌丢失了:
https://github.com/angular/universal/blob/e798d256de5e4377b704e63d993dc56ea35df97d/modules/express-engine/tokens/injection-tokens.ts
我已经发布了一个仓库,其中包含最小的设置来重现Angular 17的SSR问题: https://github.com/hittten/angularSSR17

Clone & Setup:

git clone https://github.com/hittten/angularSSR17
npm install
npm start

logs

如果你导航到 http://localhost:4200/404 ,你将看到

ERROR TypeError: Cannot read properties of null (reading 'status')
    at _NotFoundPageComponent (/Workspace/hittten/angularSSR17/src/app/pages/not-found-page/not-found-page.component.ts:17:21)

Info

基本上,我创建了一个像这样的项目:

npx @angular/cli@17.0.8 new angularSSR17 --ssr --routing --scss --skip-tests
cd angularSSR17
npm i -D firebase-tools@13.0.2
ng g c pages/homePage
ng g c pages/aboutPage
ng g c pages/notFoundPage

我还在angular.json中禁用了预渲染。我为懒加载设置了路由。我没有安装@angular/fire,因为没有必要重新创建SSR错误。

ng version

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.0.8
Node: 20.10.0
Package Manager: npm 10.2.5
OS: darwin arm64

Angular: 17.0.8
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.8
@angular-devkit/build-angular   17.0.8
@angular-devkit/core            17.0.8
@angular-devkit/schematics      17.0.8
@schematics/angular             17.0.8
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2
w1e3prcc

w1e3prcc8#

确实,关于SSR的一些事情需要记录下来,例如自从从@nguniversal/express-engine迁移到@angular/ssr之后,express令牌丢失了:
https://github.com/angular/universal/blob/e798d256de5e4377b704e63d993dc56ea35df97d/modules/express-engine/tokens/injection-tokens.ts
我花了一段时间在网上查找,才明白现在需要添加"src/express.tokens.ts"文件,因为它不再包含在@angular/ssr包中,这就是我所做的。
我已经报告了一个具体错误的问题,即注入响应令牌失败:
RESPONSE = new InjectionToken<Response>('RESPONSE'); ,这个问题也失败了。请查看这个链接: #53810

tv6aics1

tv6aics19#

我也认为,由于SSG是一个非常酷的功能,它也会提高SSR的使用率,这些事情应该更好地记录下来。
它还可以解释如何设置Link Header以预加载资源。或者您可以通过向server.ts添加新路由来动态创建sitemap.xml和robots.txt与SSR。特别是对于从像无头CMS这样的资源获取的具有动态内容的网站,这非常方便。

相关问题