Skip to content

Cannot pre-render wildcard routes when using outputMode: 'server' #30035

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.

Sign up for GitHub

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

Jump to bottom
Closed
1 task
griest024 opened this issue Apr 4, 2025 · 8 comments · Fixed by #30072 or #30156
Closed
1 task

Cannot pre-render wildcard routes when using outputMode: 'server' #30035

griest024 opened this issue Apr 4, 2025 · 8 comments · Fixed by #30072 or #30156
Labels
angular/build:application area: @angular/ssr freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix

Comments

@griest024
Copy link

griest024 commented Apr 4, 2025 •
edited
Loading

Command

build

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have a few wildcard routes in my app. There are a large number of routes which will match these wildcard routes and they are all listed in a route file as described in the docs.

"outputMode": "server",
"prerender": {
	"routesFile": "renderableRoutes.txt",
	"discoverRoutes": true
},

However when I build, I get the warning The "prerender" option is not considered when "outputMode" is specified. and the routes specified in renderableRoutes.txt are not prerendered. Removing outputMode causes the routes to be prerendered, but I get the error Error: Angular app engine manifest is not set. Please ensure you are using the '@angular/build:application' builder to build your server application. when running the server.

Minimal Reproduction

  • Add routesFile to angular.json
  • Remove outputMode from angular.json
  • Build
  • Serve SSR

Exception or Error

Error: Angular app engine manifest is not set. Please ensure you are using the '@angular/build:application' builder to build your server application

Your Environment

Angular CLI: 19.2.6
Node: 18.20.7
Package Manager: npm 10.8.2
OS: linux x64

Angular: 19.2.5
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.6
@angular-devkit/build-angular   19.2.6
@angular-devkit/core            19.2.6
@angular-devkit/schematics      19.2.6
@angular/cdk                    19.2.8
@angular/cli                    19.2.6
@angular/pwa                    19.2.6
@angular/ssr                    19.2.6
@schematics/angular             19.2.6
ng-packagr                      19.0.1
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.15.0

Anything else relevant?

I am using the @angular-devkit/build-angular:application builder.
@griest024 griest024 mentioned this issue Apr 6, 2025
Open
@alan-agius4
Copy link
Collaborator

This behavior is expected. Based on the error, it looks like you're using the new dev-preview APIs. Note that the "prerender" option is no longer applicable with these APIs, and the "outputMode" setting is now required.

For more details, refer to the documentation: https://angular.dev/guide/hybrid-rendering#customizing-build-time-prerendering-ssg

@alan-agius4 alan-agius4 closed this as not planned Won't fix, can't repro, duplicate, stale Apr 7, 2025
@griest024
Copy link
Author

What is the recommended way to prerender wildcard routes? Does getPrerenderParams work with wildcards?

@alan-agius4
Copy link
Collaborator

What is the recommended way to prerender wildcard routes? Does getPrerenderParams work with wildcards?

Yes, that’s the point of it.

@griest024
Copy link
Author

Well it doesn't seem to:

Invalid 'docs/api/**' route configuration: 'getPrerenderParams' cannot be used with a '*' or '**' route.

but I'll just convert them to parameterized routes, they're functionally equivalent in this context.

@alan-agius4
Copy link
Collaborator

You need to provide the route parameters as described in the docs: https://angular.dev/guide/hybrid-rendering#parameterized-routes

@griest024
Copy link
Author

You need to provide the route parameters as described in the docs: https://angular.dev/guide/hybrid-rendering#parameterized-routes

As I stated above, Angular disallows getPrerenderParams with wildcard routes. So I will reiterate my question:

How can I prerender wildcard routes? Parameterized routes do not work because the route can be nested deeply, e.g. /docs/api/package/subpackage/symbol where the route config for that path is:

{
  path: 'docs/api/**',
  component: DocViewerComponent
}

@alan-agius4
Copy link
Collaborator

Instead of using a catch-all route, you can define it as a parameterized path: /docs/api/:package/:subpackage/:symbol

@griest024
Copy link
Author

Instead of using a catch-all route, you can define it as a parameterized path: /docs/api/:package/:subpackage/:symbol

The routes can be nested arbitrarily deep. /docs/api/package/sub1/sub2/sub3/sub4/symbol is a potential route that would need to be handled.

@alan-agius4 alan-agius4 reopened this Apr 8, 2025
@alan-agius4 alan-agius4 changed the title Cannot specify routesFile when using outputMode: 'server' Cannot pre-render wildcard routes when using outputMode: 'server' Apr 9, 2025
@alan-agius4 alan-agius4 added type: bug/fix freq1: low Only reported by a handful of users who observe it rarely severity3: broken and removed feature Issue that requests a new feature labels Apr 9, 2025
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 9, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
298d382 
Handle `getPrerenderParams` return values when used with wildcard route paths.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes.

This enables more flexible prerendering configurations in server routes.

Example:
```ts
{
  path: '/product/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [['category', '1'], ['category', '2']];
  }
}
```

Closes angular#30035
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 9, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
8002f45 
Handle `getPrerenderParams` return values when used with wildcard route paths.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes.

This enables more flexible prerendering configurations in server routes.

Example:
```ts
{
  path: '/product/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [['category', '1'], ['category', '2']];
  }
}
```

Closes angular#30035
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 9, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
e583b67 
Handle `getPrerenderParams` return values when used with wildcard route paths.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes.

This enables more flexible prerendering configurations in server routes.

Example:
```ts
{
  path: '/product/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [['category', '1'], ['category', '2']];
  }
}
```

Closes angular#30035
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 9, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
ff6d1b4 
Handle `getPrerenderParams` return values when used with wildcard route paths.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes.

This enables more flexible prerendering configurations in server routes.

Example:
```ts
{
  path: '/product/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [['category', '1'], ['category', '2']];
  }
}
```

Closes angular#30035
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 9, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
bb94a89 
Handle `getPrerenderParams` return values when used with wildcard route paths.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes.

This enables more flexible prerendering configurations in server routes.

Example:
```ts
{
  path: '/product/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [['category', '1'], ['category', '2']];
  }
}
```

Closes angular#30035
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 10, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
02cf4f4 
Handle `getPrerenderParams` return values when used with wildcard route paths.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes.

This enables more flexible prerendering configurations in server routes.

Example:
```ts
{
  path: '/product/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [['category', '1'], ['category', '2']];
  }
}
```

Closes angular#30035
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 11, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
5cd43cf 
Handle `getPrerenderParams` return values when used with wildcard route paths.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes.

This enables more flexible prerendering configurations in server routes.

Example:
```ts
{
  path: '/product/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [['category', '1'], ['category', '2']];
  }
}
```

Closes angular#30035
@alan-agius4 alan-agius4 mentioned this issue Apr 15, 2025
Merged
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 22, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard and comb…
b701a6c 
…ined routes

Handle `getPrerenderParams` return values when used with wildcard route paths, including support for combined routes like `/product/:id/**`.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes and dynamic segments combined with catch-all routes.

This enables more flexible prerendering configurations in server routes, including handling specific paths such as `/product/1/laptop/123`.

Example:
```ts
{
  path: '/product/:id/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [
      { id: '1', '**': '/laptop/123' },
      { id: '2', '**': '/laptop/456' }
    ];
  }
}
```

Closes angular#30035
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 22, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
698d16e 
Handle `getPrerenderParams` return values when used with wildcard route paths, including support for combined routes like `/product/:id/**`.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes and dynamic segments combined with catch-all routes.

This enables more flexible prerendering configurations in server routes, including handling specific paths such as `/product/1/laptop/123`.

Example:
```ts
{
  path: '/product/:id/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [
      { id: '1', '**': '/laptop/123' },
      { id: '2', '**': '/laptop/456' }
    ];
  }
}
```

Closes angular#30035
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 23, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
7293914 
Handle `getPrerenderParams` return values when used with wildcard route paths, including support for combined routes like `/product/:id/**`.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes and dynamic segments combined with catch-all routes.

This enables more flexible prerendering configurations in server routes, including handling specific paths such as `/product/1/laptop/123`.

Example:
```ts
{
  path: '/product/:id/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [
      { id: '1', '**': 'laptop/123' },
      { id: '2', '**': 'laptop/456' }
    ];
  }
}
```

Closes angular#30035
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 23, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
cb3446e 
Handle `getPrerenderParams` return values when used with wildcard route paths, including support for combined routes like `/product/:id/**`.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes and dynamic segments combined with catch-all routes.

This enables more flexible prerendering configurations in server routes, including handling specific paths such as `/product/1/laptop/123`.

Example:
```ts
{
  path: '/product/:id/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [
      { id: '1', '**': 'laptop/123' },
      { id: '2', '**': 'laptop/456' }
    ];
  }
}
```

Closes angular#30035
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Apr 23, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
501f092 
Handle `getPrerenderParams` return values when used with wildcard route paths, including support for combined routes like `/product/:id/**`.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes and dynamic segments combined with catch-all routes.

This enables more flexible prerendering configurations in server routes, including handling specific paths such as `/product/1/laptop/123`.

Example:
```ts
{
  path: '/product/:id/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [
      { id: '1', '**': 'laptop/123' },
      { id: '2', '**': 'laptop/456' }
    ];
  }
}
```

Closes angular#30035

(cherry picked from commit cb3446e)
@alan-agius4 alan-agius4 linked a pull request Apr 23, 2025 that will close this issue
fix(@angular/ssr): support getPrerenderParams for wildcard routes #30156
Merged
alan-agius4 added a commit that referenced this issue Apr 23, 2025
@alan-agius4
fix(@angular/ssr): support getPrerenderParams for wildcard routes
a4e415e 
Handle `getPrerenderParams` return values when used with wildcard route paths, including support for combined routes like `/product/:id/**`.
Supports returning an array of path segments (e.g., `['category', '123']`) for `**` routes and dynamic segments combined with catch-all routes.

This enables more flexible prerendering configurations in server routes, including handling specific paths such as `/product/1/laptop/123`.

Example:
```ts
{
  path: '/product/:id/**',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    return [
      { id: '1', '**': 'laptop/123' },
      { id: '2', '**': 'laptop/456' }
    ];
  }
}
```

Closes #30035

(cherry picked from commit cb3446e)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
angular/build:application area: @angular/ssr freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix
Projects
None yet
Milestone
No milestone
2 participants
@griest024 @alan-agius4