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

Angular 17 SSR baseHref / baseUrl is not respected #27356

Closed
JustDoItSascha opened this issue Mar 25, 2024 · 4 comments · Fixed by #28355
Closed

Angular 17 SSR baseHref / baseUrl is not respected #27356

JustDoItSascha opened this issue Mar 25, 2024 · 4 comments · Fixed by #28355
Assignees

Comments

@JustDoItSascha
Copy link

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

platform-server

Is this a regression?

Yes

Description

Maybe I'm stupid or don't see something, but I think there is something wrong. I want to deploy an angular ssr app under a subpath of a domain, for example https://example.org/myapp. This subpath is handled by an nginx reverse proxy. So far so good.

Now I'm adding baseHref to the angular.json. It gets added to the index.html, everything fine. But if I'm looking to the server.ts I see the following:

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

server.get('*', (req, res, next) => {
        const { protocol, originalUrl, baseUrl, headers } = req;

        commonEngine
            .render({
                bootstrap,
                documentFilePath: indexHtml,
                url: `${protocol}://${headers.host}${originalUrl}`,
                publicPath: browserDistFolder,
                providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
            })
            .then((html) => res.send(html))
            .catch((err) => next(err));
    });

But the baseUrl is always empty. Because the baseUrl can only be set if the code would look like this:

const router = express.Router();

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

router.get('*', (req, res, next) => {
        const { protocol, originalUrl, baseUrl, headers } = req;

        commonEngine
            .render({
                bootstrap,
                documentFilePath: indexHtml,
                url: `${protocol}://${headers.host}${originalUrl}`,
                publicPath: browserDistFolder,
                providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
            })
            .then((html) => res.send(html))
            .catch((err) => next(err));
    });

server.use('/myapp', router);

Without using .use() the baseUrl MUST be empty. So I don't understand the whole purpose behind the default code? And of course it's not working with the default code, otherwise I wouldn't write.

So it looks like this scenario is not possible without changing the server.ts fundamentally. And it would be nice, if this changes are described in the docs.

Or if they were the default and changes to the baseHref option in the angular.json would also affect the server.ts. That I don't have to change the server.use() part manually.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

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

Angular 17.3.1

Anything else?

No response

@alan-agius4 alan-agius4 transferred this issue from angular/angular Mar 25, 2024
@alfaex

This comment was marked as off-topic.

@hiepxanh

This comment was marked as off-topic.

@everflux

This comment was marked as off-topic.

@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
alan-agius4 added a commit 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 #27356, closes #27403, closes #25726, closes #25718 and closes #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.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants