Document how to properly set status codes when using SSR about angular HOT 8 OPEN

Hi @chriswoodie, the provided code in the stackoverflow issue does work in an ng new application. Thus, the issue might be something else.

Kindly provide a minimal reproduction. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

from angular.

@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?

from angular.

This is the indented behaviour when using prerendering, since there is no request/response information. If a page depends on such information prerendering needs to be opted out for that page.

from angular.

@alan-agius4 Got it, I think this should be mentioned in the documentation because I had no idea about this. Would've saved me days of debugging and others will probably benefit from this too.

from angular.

@alan-agius4 Also, how do you opt out a page from prerendering? Can't find this in the docs either. I can only find the option to manually specify which routes to include, not exclude.

from angular.

At the moment the only way to do it is to disable auto route discovery. https://angular.io/guide/prerendering#build-options-for-prerender

from angular.

Indeed, several things about SSR need to be documented, for example since the move from @nguniversal/express-engine to @angular/ssr the express tokens were lost:

https://github.com/angular/universal/blob/e798d256de5e4377b704e63d993dc56ea35df97d/modules/express-engine/tokens/injection-tokens.ts

I have published a repo with the minimum to recreate the SSR problem with angular 17: https://github.com/hittten/angularSSR17

Clone & Setup:

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

logs

if you navigate to http://localhost:4200/404 you will see

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

basically, I have created a project like this:

npx @angular/[email protected] new angularSSR17 --ssr --routing --scss --skip-tests
cd angularSSR17
npm i -D [email protected]
ng g c pages/homePage
ng g c pages/aboutPage
ng g c pages/notFoundPage

I also disable pre-render in angular.json:

{
    "scripts": [],
    "server": "src/main.server.ts",
    "prerender": false,
    "ssr": {
      "entry": "server.ts"
    }
}

and I have done the settings of the routes for lazy load. I have not installed @angular/fire because it is not necessary to recreate the SSR error.

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

from angular.

Indeed, several things about SSR need to be documented, for example since the move from @nguniversal/express-engine to @angular/ssr the express tokens were lost:

https://github.com/angular/universal/blob/e798d256de5e4377b704e63d993dc56ea35df97d/modules/express-engine/tokens/injection-tokens.ts

I had to search the internet for a while to understand that I had to add the "src/express.tokens.ts" file now because it no longer comes in the @angular/ssr package and that's what I did

I have reported an issue with the specific error of injecting the response token:
RESPONSE = new InjectionToken<Response>('RESPONSE'); which also fails

See this: #53810

from angular.