The application builder performs fine-grained file watching now which removes
the need to watch the project root by default as it did in early implementations.
As a result, the need to ignore the `node_modules` directory is not longer necessary
by default and is only needed when the `NG_BUILD_WATCH_ROOT` environment variable
is enabled.
To reduce duplicate code within tests for rebuild/watch scenarios, a new
helper has been added to the builder test harness. This helper allows
passing in an array of test case functions that are executed in order per
rebuild. The development server's watch option tests have been updated to
use the new helper.
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
With the introduction of the `RenderMode` configuration for routes, some routes may be set to `RenderMode.Client` while still including the `provideClientHydration()` function in the provider list during bootstrap. This led to a false-positive warning in the console, incorrectly suggesting a hydration misconfiguration.
This commit introduces a DOM marker that allows the framework to bypass these unnecessary checks, preventing the misleading warnings.
See: https://github.com/angular/angular/pull/58004
This commit enables server-side rendering (SSR) in Vite when prerendering is turned off. It also imports `@angular/compiler` in the SSR middleware to resolve the following issue:
```
[vite] Internal server error: The injectable 'PlatformNavigation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
The injectable is part of a library that has been partially compiled. However, the Angular Linker has not processed the library to utilize JIT compilation as a fallback.
Ideally, the library should be processed with the Angular Linker for complete AOT compilation.
```
Closes#28523
Previously, Vite prebundled dependencies were stored in a shared directory across all projects, which caused the `_metadata.json` files to be overwritten. This resulted in undefined behavior, such as re-optimizing dependencies on each run when multiple projects were present in the workspace. Additionally, it introduced conflicts when running multiple `ng serve` processes simultaneously.
Closes#28536
The `ssr.entry` (server.ts file) is now utilized during prerendering, allowing access to locally defined API routes for improved data fetching and rendering.
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.
The `@angular/compiler` package now has an updated `encapsulateStyle` helper
that allows directly providing the component identifier as an argument.
This avoids needing to perform an additional regular expression replace
with the internal marker text.
Also, the component identifier validity check has been updated to support
unicode characters in the event they happen to be used for the application
identifier.
The `<animate>` tag, used for SVG animations, was incorrectly treated as a non-self-closing tag by the Angular build process. This resulted in errors during the build, as the parser expected a closing `</animate>` tag even when unnecessary.
Closes#28502
This change allows for forced disabling of prerendering and route extraction when using Vite with Angular CLI. In certain scenarios, such as when the application builder is invoked directly and not in watch mode (e.g. ADEV), an external configuration may be necessary.
The build system will now transform inline styles into a corresponding external runtime
style with a URL for the Angular AOT compiler when the development server has enabled
component HMR for styles. This allows both file-based and inline component styles to
be eligible for component style HMR. The inline styles are provided to the development
server in an equivalent form to the file-based styles which the Angular runtime will
request via `link` elements during development. A unique identifier is produced for
each inline style that combines the containing file and order of the style within the
containing file to represent the location of the style. This provides an equivalent
unique identifier to the full path used by file-based styles.
To support automatic component style HMR, `application` builder in development mode now
provides support for generating external runtime component stylesheets. This capability
leverages the upcoming support within the AOT -compiler to emit components that generate
`link` elements instead of embedding the stylesheet contents for file-based styles
(e.g., `styleUrl`). In combination with support within the development server to handle
requests for component stylesheets, file-based component stylesheets will be able to be
replaced without a full page reload.
The implementation leverages the AOT compiler option `externalRuntimeStyles` which uses
the result of the resource handler's resolution and emits new external stylesheet metadata
within the component output code. This new metadata works in concert with the Angular runtime
to generate `link` elements which can then leverage existing global stylesheet HMR capabilities.
This capability is current disabled by default while all elements are integrated across the
CLI and framework and can be controlled via the `NG_HMR_CSTYLES=1` environment variable.
Once fully integrated the environment variable will unneeded.
This feature is only intended for use with the development server. Component styles within
in built code including production are not affected by this feature.
NOTE: Rebuild times have not yet been optimized. Future improvements will reduce the component
stylesheet only rebuild time case.
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
If a HTTP request is made to the development server that explicitly requests
an HTML file (i.e., `/abc.html`), the development server will now attempt to
fallback to the root `index.html` file if the requested HTML file does not exist.
Since this may indicate a defect or other application misconfiguration such as a
missing asset, a warning will also be issued in the console during development to
notify the developer that something may be wrong.
