Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR + Internationalization + pre-rendered routes does not return pre-rendered pages #27196

Closed
timothyBrake opened this issue Mar 4, 2024 · 1 comment · Fixed by #28355
Closed
Assignees
Labels
area: @angular/ssr freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix

Comments

@timothyBrake
Copy link

Which @angular/* package(s) are the source of the bug?

language-service, platform-server

Is this a regression?

Yes

Description

When adding SSR and Internationalization to a project, the pre-rendered routes are not served.

Most basic example with preconfigured ssr + localize + prerender: https://github.com/lostium/ssr-i18n-angular17
But this is also visible with a clean Angular CLI project adding SSR + localize + Prerender

  1. Clean git clone of this project https://github.com/lostium/ssr-i18n-angular17
  2. Build the project
  3. Then manually update dist/ssr-i18n-angular17/browser/en/page-1/index.html and add text This is pre-rendered
  4. Start proxy server
  5. Open Chrome and make sure using DevTools > Network > Disable Cache is checked
  6. Using browser navigate to http://localhost:4000/en/page-1
  7. Should show the This is pre-rendered but it is NOT showing that page
  8. Using browser navigate to http://localhost:4000/en/page-1/index.html DOES show the pre-rendered page

Somewhere along the way Angular isn't serving the pre-rendered page when navigating to http://localhost:4000/en/page-1

To be clear: everything works as expected excluding Internationalisation and step 6 without the i18n does work http://localhost:4000/page-1 so its only after adding i18n that the pre-rendered page isn't being served.

Please provide a link to a minimal reproduction of the bug

https://github.com/lostium/ssr-i18n-angular17

Please provide the exception or error you saw

After manually updating the dist/ssr-i18n-angular17/browser/en/page-1/index.html page and starting the server and you navigate to _http://localhost:4000/en/page-1_ that pre-rendered page isn't being served.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.2.2
Node: 20.11.1
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 17.2.3
... animations, common, core, forms, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1702.2
@angular-devkit/build-angular   17.2.2
@angular-devkit/core            17.2.2
@angular-devkit/schematics      17.2.2
@angular/cli                    17.2.2
@angular/compiler               17.0.8
@angular/compiler-cli           17.0.8
@angular/localize               17.0.8
@angular/ssr                    17.2.2
@schematics/angular             17.2.2
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.4

Anything else?

The combination of SSR and Internationalisation isn't well documented and the ng update, ng add doesn't change the code to make it work together. Developers now have to go outside the official Angular documentation to make it work.
Would be great as well that the official Angular documentation has a working version of all these feature combined together with complete code of a most basic & running example: SSR + Internationalisation + Pre-render.

@alan-agius4 alan-agius4 transferred this issue from angular/angular Mar 4, 2024
@alan-agius4 alan-agius4 added type: bug/fix freq1: low Only reported by a handful of users who observe it rarely severity3: broken area: @angular/ssr labels Mar 4, 2024
@alan-agius4 alan-agius4 self-assigned this Aug 30, 2024
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 17, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 17, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 17, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 17, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 17, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 17, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 17, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 18, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 18, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 18, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 18, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 18, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

## Key changes:
- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 18, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 18, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 18, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 19, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 19, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 19, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Sep 19, 2024
…n builder

The `outputMode` option accepts two values:
- **`static`:**  Generates a static output (HTML, CSS, JavaScript) suitable for deployment on static hosting services or CDNs. This mode supports both client-side rendering (CSR) and static site generation (SSG).
- **`server`:** Generates a server bundle in addition to static assets, enabling server-side rendering (SSR) and hybrid rendering strategies. This output is intended for deployment on a Node.js server or serverless environment.

- **Replaces `appShell` and `prerender`:**  The `outputMode` option simplifies the CLI by replacing the `appShell` and `prerender` options when server-side routing is configured.
- **Controls Server API Usage:**  `outputMode` determines whether the new server API is utilized. In `server` mode, `server.ts` is bundled as a separate entry point, preventing direct references to `main.server.ts` and excluding it from localization.

Closes angular#27356, closes angular#27403, closes angular#25726, closes angular#25718 and closes angular#27196
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 20, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: @angular/ssr freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants