When using the development server with the application builder, the internal state of
any external component stylesheets is now more comprehensively tracked. This allows
for more flexibility in both debugging potential problems as well as supporting additional
stylesheet preprocessing steps including deferred component stylesheet processing.
This commit cleans up duplicate code left from the previous implementations of process, serve, and render. Additionally, prerender serve now exclusively handles HEAD and GET requests, aligning with updated handling requirements. The private `renderStatic` method has been removed in favor of the `handle` method for improved maintainability.
When using the development server with the application builder (default for new projects),
Angular components using ShadowDOM view encapsulation will now cause a full page reload.
This ensures that these components styles are correctly updated during watch mode. Vite's
CSS hot replacement client code currently does not support searching and replacing `<link>`
elements inside shadow roots. When support is available within Vite, an HMR based update
for ShadowDOM components can be supported as other view encapsulation modes are now.
Updated TSDoc comments by replacing @note with @remarks across the codebase. This aligns with TSDoc's preferred conventions, where @remarks is used for supplementary explanations and additional context.
When live reload is disabled (`"liveReload": false`/`no-live-reload`) within
the development server, the Vite websocket server will no longer be initialized.
Additionally, the client code will not be loaded by the browser. This allows the
development server to be used in test scenarios that would prefer to more fully
represent the production fielded configuration such as E2E testing or other forms
of browser-based testing.
The development server's `hmr` option will now disable both global and component
stylesheet hot replacement if explicitly disabled. These features are enabled by
default for all projects.
When using the development server with the application builder (default for new projects),
experimental support for component template hot replacement is now available for use. To
enable support, the `NG_HMR_TEMPLATES=1` environment variable must present when executing
the development server (for example, `NG_HMR_TEMPLATES=1 ng serve`). Once support has become
stable, template hot replacement will be enabled by default.
Now that additional result object types can be returned from the build
system, the error overlay must be cleared on all non-error results. The
introduction of component update results and eventual incremental results
will now properly clear the error overlay after a successful build.
Updated the calculation to use `Buffer.byteLength()` for determining the length of escaped file content. This change ensures that the `size` property in server asset metadata accurately represents the length of the escaped content.
This commit refactors the build process for server-side rendering (SSR) by dividing server assets into separate, importable chunks rather than bundling them into a single output file.
When checking for bundler context invalidation for any referenced files,
the native path format is now used to ensure that the watch files can
be correctly matched. This is particularly important for Windows due to
the differing path segment separator.
Within the development server, the external stylesheet encapsulation logic has been
adjusted to avoid needing to asynchronously import the `@angular/compiler` package within
the request execution. This removes the need to pre-import the package at the start of the
development server which was previously used to avoid a delay in stylesheet response on
first use. The external stylesheet response execution is also now fully synchronous.
If an invalid component identifier is provided to the development server for an external
stylesheet requiring encapsulation, both a console message and a 400 status response will
now be sent. This removes the potential for invalid styles to be sent to the browser.
When using the new developer preview API to serve prerendered pages, ETags are added automatically, enabling efficient caching and content validation for improved performance.
Now that the TypeScript bundler contexts perform additional checks for validity,
they can now be cached in memory during watch modes. This allows the TypeScript
bundler contexts to skip rebundling when not affected by a file changed. This is
particularly beneficial for style related file changes where no code processing
is otherwise required.
When using the development server with the application builder (default for new projects),
the external stylesheet functionality for component style hot replacement was incorrectly
considering SVG files as stylesheet resources. This resulted in a build error when using
SVG files as a template source. The file extension based checks have now been improved to
account for this usage.
The TypeScript-based bundling contexts have now been separated from the other
bundling contexts that may be present in an application build. The later of which
include global styles, scripts, and non-TypeScript polyfills. This allows for
the TypeScript bundling contexts to perform additional checks during a rebuild to
determine if they actually need to be rebundled. The bundling context caching for
the TypeScript contexts has not yet been enabled but these changes prepare for the
switch to allow conditional rebundling on file changes.
The experimental Angular component template hot replacement capabilities
will be initially controlled via an environment variable. Setting `NG_HMR_TEMPLATES=1`
with the development server that is using the application builder will generate the
runtime event code to support hot replacement of an individual component template.
The build system itself does not yet generate the component update build results needed
to trigger the runtime events. The environment variable is currently intended to support
integration of the remaining code to fully implement the feature.
This commit implements the capability for the App Engine to serve prerendered pages directly. Previously, we relied on frameworks like Express for this functionality, which resulted in inconsistent redirects for directories where in some cases a trailing slash was added to the route.
**Note:** This change applies only when using the new SSR APIs. When using the `CommonEngine`, a 3rd party static serve middleware is still required.
A bundle call for a `BundlerContext` can now force a rebundling in cases
where the cached version should not be used. This is currently not leveraged
within the code but will be used for improvements to typescript based context
rebuilds in the future.
When using the development server with the application builder, file-based component
styles will now be bundled during the main builder execution instead of within the
application code bundling step. This allows for these styles to be processed independently
from any code bundling steps and will support future changes that will allow the
builder to completely skip code bundling if only file-based component stylesheets are changed.
When using the development server with the application builder, external
component stylesheet usage must always be record to ensure that any hot
replacement actions correctly reference the relevant components. Previously,
browser cached styles would return a 304 status prior to recording the usage.
This resulted in the development server not knowing that the component needed
a potential update in the future.
When using the development server with the application build system,
resource files managed by the build system will now using ETag headers
to avoid resending content that has not changed since the last request.
This includes such content as global stylesheet files, image/font files
referenced in stylesheets, and other files managed by the bundler.
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
When using the development server, Angular component stylesheet requests that
use hot replacement (default for v19) will now use the `ETag` header to remove
the need to reprocess and resend encapsulated component styles if the styles
have not changed since last usage. The ETag value used is a combination of the
style content and the encapsulation component identifier.
When `outputMode` is configured, `--prerender` and `--app-shell` become no-ops, making server feature disabling difficult without modifying the configuration.
This commit introduces the `--no-server` option, which can be used with `--output-mode static` to fully disable all server features.
```
ng build --output-mode static --no-server
```
When using the development server with a production configuration or with bundle
hashing enabled, the external stylesheet files used by the development server for
hot replacement of component styles are no longer hashed. This ensures that the
requests from the runtime served by the development server match the available
generated component stylesheet files.
In Node.js 20, changes to ESM loader hooks result in the `--import` execArgv being passed from the parent to child workers.
This commit resolves the issue by setting an empty `execArgv` in the JavaScript transformer, preventing unintended propagation.
Closes#28683
Following up on the logic provided in #28639, we want to offer an opt-in
option in angular.json to enable the auto-CSP transformation.
For now, builds for `ng serve` will have Auto-CSP disabled.
Auto-CSP is a feature to rewrite the `<script>` tags in a index.html
file to either hash their contents or rewrite them as a dynamic loader
script that can be hashed. These hashes will be placed in a CSP inside a
`<meta>` tag inside the `<head>` of the document to ensure that the
scripts running on the page are those known during the compile-time of
the client-side rendered application.
The internal AOT Angular compilation processing can now generate the newly
introduced template update functions during development server rebuilds of
template only file changes. These template update functions are not yet used
but provide the infrastructure to enable template hot replacement in a
future change.
The component stylesheet bundler is now created at the start of the build
and accessible prior to the bundling actions. This will provide support for
generating updated component styles and bypassing all code bundling when using
the development server and only component styles have been modified.
