The configured inline style language for Angular components is now set during
the construction of the component stylesheet bundler. This avoids needing to
repeatedly pass the value into each inline bundling call. The ability to
customize the language per call is retained to allow individual style control
if needed.
Ensures that we consistently set "development" for non-optimized and
"production" for optimized builds. This is consistent with other
bundlers (Vite/webpack/parcel/...).
This commit introduces a new option called `experimentalPlatform` to the Angular SSR configuration.
The `experimentalPlatform` option allows developers to specify the target platform for the server bundle, enabling the generation of platform-neutral bundles suitable for deployment in environments like edge workers and other serverless platforms that do not rely on Node.js APIs.
This change enhances the portability of Angular SSR applications and expands their deployment possibilities.
**Note:** that this feature does not include polyfills for Node.js modules and is experimental, subject to future changes.
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 commit provides a workaround for https://github.com/angular/angular-cli/issues/28336, which occurs due to the interaction between `zone.js` and `listr2`. The issue prevents proper termination of the development server using Ctrl + C when dev-server.
Closes: #28336
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.
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.
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.
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.
When using the development server, HTTP HEAD requests will now correctly
respond for the virtual output files generated from the Angular build
system. Previously Vite only handled GET requests for the files. While
HEAD requests are not common in development workflows, it can be needed in
more complex cases with additional servers/proxies/etc. during development.
The Angular CLI will now enable the Node.js compile cache when available
for use. Node.js v22.8 and higher currently provide support for this feature.
The compile cache stores the v8 intermediate forms of JavaScript code for the Angular
CLI itself. This provides a speed up to initialization on subsequent uses the Angular CLI.
The Node.js cache is stored in a temporary directory in a globally accessible
location so that all Node.js instances of a compatible version can share the
cache. The code cache can be disabled if preferred via `NODE_DISABLE_COMPILE_CACHE=1`.
Based on initial profiling, this change provides an ~6% production build time
improvement for a newly generated project once the cache is available.
```
Benchmark 1: NODE_DISABLE_COMPILE_CACHE=1 node ./node_modules/.bin/ng build
Time (mean ± σ): 2.617 s ± 0.016 s [User: 3.795 s, System: 1.284 s]
Range (min … max): 2.597 s … 2.640 s 10 runs
Benchmark 2: node ./node_modules/.bin/ng build
Time (mean ± σ): 2.475 s ± 0.017 s [User: 3.555 s, System: 1.354 s]
Range (min … max): 2.454 s … 2.510 s 10 runs
Summary
node ./node_modules/.bin/ng build ran
1.06 ± 0.01 times faster than NODE_DISABLE_COMPILE_CACHE=1 node ./node_modules/.bin/ng build
```
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.
Replaced multiple `appendServerConfiguredHeaders` calls with a single custom middleware to append headers to all responses, simplifying the code and ensuring consistency.
