The Critters project has been transferred to the Nuxt team, who will now manage its development and has been renamed to Beasties.
See: https://github.com/danielroe/beasties
This commit updates several schematics to make the new `@angular/ssr` feature opt-in. Users can opt in by using the `--server-routing` option or by responding with `yes` to the prompt.
This commit relocates the DI tokens to a dedicated entry point. This change ensures that we do not depend on tree-shaking to eliminate server code from client bundles.
Closes#28670
This commit revises the app-shell and ssr schematics to incorporate the new Server Rendering API, along with the integration of server-side routes.
BREAKING CHANGE: The app-shell schematic is no longer compatible with Webpack-based builders.
This update changes the handling of the crypto unavailable error in the Angular SSR environment. Instead of throwing a hard error, which could interrupt the application flow, the error is now treated as a soft error
Implement LRU cache for inlined CSS in server-side rendered HTML.
This optimization significantly improves server-side rendering performance by reusing previously inlined styles and reducing the overhead of repeated CSS inlining.
Performance improvements observed:
Performance improvements observed:
* **Latency:** Reduced by ~18.1% (from 1.01s to 827.47ms)
* **Requests per Second:** Increased by ~24.1% (from 381.16 to 472.85)
* **Transfer per Second:** Increased by ~24.1% (from 0.87MB to 1.08MB)
These gains demonstrate the effectiveness of caching inlined CSS for frequently accessed pages, resulting in a faster and more efficient user experience.
This change introduces error handling to ensure that when multiple routes are configured with `RenderMode.AppShell`, an error message is displayed. This prevents misconfiguration and enhances clarity in route management.
This commit resolves an issue where routes defined in the Angular server routing configuration did not match those in the Angular router. Previously, discrepancies between these routes went unnoticed by users. With this update, appropriate error messages are now displayed when mismatches occur, enhancing the developer experience and facilitating easier troubleshooting.
If multiple concurrent requests hit `getEntryPointExports`, all of
them would previously see the cache miss for entry point. With this
change, only the first request will and the others can leverage the
cache.
This can be important when instances are added to a pool under high
traffic.
Introduced the `createRequestHandler` and `createNodeRequestHandler` utilities to expose middleware functions from the `server.ts` entry point for use with Vite.
This provides flexibility in integrating different server frameworks, including Express, Hono, and Fastify, with Angular SSR.
Examples:
**Express**
```ts
export default createNodeRequestHandler(app);
```
**Nest.js**
```ts
const app = await NestFactory.create(AppModule);
export default createNodeRequestHandler(app);
```
**Hono**
```ts
const app = new Hono();
export default createRequestHandler(app.fetch);
```
**Fastify**
```ts
export default createNodeRequestHandler(async (req, res) => {
await app.ready();
app.server.emit('request', req, res);
});
```
When `ssr.entry` (server.ts) is defined, Vite will now use it in the dev-server. This allows API and routes defined in `server.ts` to be accessible during development. This feature requires the new `@angular/ssr` APIs, which are currently in developer preview.
Modified the `HtmlTransformHandler` type to accept a context object containing a URL and HTML content. This change supports the `html:transform:pre` hook, enhancing the handler's capability to process transformations based on the request URL.
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
This option allows validation during the build process to ensure that, when the output mode is set to static, no routes requiring server-side rendering are included.
Adds a new function `isMainModule` that checks if the current module is the main entry point of the application.
This is useful to ensure that server listener handlers are only registered when the module is executed directly and not when it's imported as a dependency such as the dev-server. This prevents potential issues with multiple listeners being registered unintentionally.
This commit introduces the following changes:
- Disallows paths starting with a slash to match Angular router behavior.
- Errors are now stored and displayed at a later stage, improving UX by avoiding unnecessary stack traces that are not useful in this context.
The `Readonly` mapped type only introduces the `readonly` modifier for each property,
but `Map` has mutating methods like `clear`, `delete` and `set` that would still
remain usable. This commit switches those usages over to the `ReadonlyMap` type which
doesn't have any of the mutating methods.
I often struggle with spacing around block comments, so I've decided to add the `lines-around-comment` lint rule to help manage this.
For more details, see the https://eslint.style/rules/js/lines-around-comment
This commit introduces a new `getHeaders` method to the `AngularAppEngine` and `AngularNodeAppEngine` classes, designed to facilitate the retrieval of HTTP headers based on URL pathnames for statically generated (SSG) pages.
```typescript
const angularAppEngine = new AngularNodeAppEngine();
app.use(express.static('dist/browser', {
setHeaders: (res, path) => {
// Retrieve headers for the current request
const headers = angularAppEngine.getHeaders(res.req);
// Apply the retrieved headers to the response
for (const { key, value } of headers) {
res.setHeader(key, value);
}
}
}));
```
In this example, the `getHeaders` method is used within an Express application to dynamically set HTTP headers for static files. This ensures that appropriate headers are applied based on the specific request, enhancing the handling of SSG pages.
Expose a variant of `AngularAppEngine` tailored for Node.js. These additions streamline the process by minimizing boilerplate code and eliminate the need for users to call `createWebRequestFromNodeRequest` before invoking the render method.
These additions enhance server-side rendering capabilities by providing more flexibility in handling web requests and responses within Node.js environments.
This update addresses an issue on Windows where rollup attempts to bundle the `@angular/ssr`as part of the `@angular/ssr/node` FESM. Additionally, `tslib` is removed from externals as it is already configured internally within `ng_package`. See: 76b9e2b836/packages/bazel/src/ng_package/ng_package.bzl (L106)
This refactor moves the Node.js-specific request and response helper functions to the /node entry point. This change improves modularity by separating Node.js-specific logic from the main SSR codebase.
