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.
The component stylesheet bundler is now created during the setup of the Angular
compiler plugin options. This is an initial step to support more fine-grained
rebuild actions with the new component stylesheet development server support.
The `StartTag` and `EndTag` types are now also exported along with the
`htmlRewritingStream` factory. These types are commonly used with the
rewriter and by exporting them reduces the need to manually extract them
from the underlying methods.
When using the `application` builder (default for new projects) with the
development server, component style only changes will now automatically
replace the styles within the running application without a full reload
of the page. No application code changes are necessary and both file-based
(`styleUrl`/`styleUrls`) and inline (`styles`) component styles are supported.
Within a component template, `<style>` elements and `<link rel="stylesheet">`
elements with relative `href` attributes are also supported.
If any issues are encountered or it is preferred to not hot replace component
styles, the `NG_HMR_CSTYLES=0` environment variable can be used to disable
the feature. Setting the `liveReload` option to false will also disable all
updates.
When using the application builder with `isolatedModules`, the bundler will
directly handle TypeScript transpilation and bundling. Previously, any input
TSX files were loaded by the bundler as TS files. This difference caused errors
when attempting to process the files since the syntax differs between TSX and TS.
The appropriate loader will now be used if the input file is TSX in this situation.
This commit introduces the functionality to configure a limited number of options for Sass processing in the Angular application builder. The following options have been added to enhance the Sass integration:
- **futureDeprecations**: Specifies features that are scheduled for deprecation. The compiler will treat these as active and emit warnings as necessary.
- **fatalDeprecations**: Identifies Sass features that are already deprecated and will cause build failures if used.
- **silenceDeprecations**: This option suppresses deprecation warnings for specified versions.
Usage example:
```json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputHashing": "none",
"namedChunks": true,
"stylePreprocessorOptions": {
"sass": {
"futureDeprecations": ["color-functions"],
"fatalDeprecations": ["color-functions"],
"silenceDeprecations": ["1.77.0"]
}
}
}
}
}
```
For more information about these options, please refer to the Sass documentation: https://sass-lang.com/documentation/js-api/interfaces/options/Closes#28587
To improve type-checking and reduce hard to diagnose errors when using the new
`production`/`development` conditions, the set of conditions used by the bundler
are now also synchronized with those used by TypeScript. This helps ensure
that type mismatches are avoided by type-checking against the actual file that
will be bundled into the output.
On slow systems, a race condition can lead to the sass worker thread
being notified to wake up before a message is posted. This causes the
build to be aborted because the searched file is not found.
Waiting twice for a non-zero number in the signal handles this race
correctly, and the second wait should be a noop in the usual case.
Fixes#27167
An additional development server middleware has been added that responds to
client `/@ng/component` requests from the Angular framework for hot component
template updates. These client requests are made by the framework after being
triggered by the development server sending a `angular:component-update`
WebSocket event. The Angular compiler's new internal `_enableHmr` option will
emit template replacement and reloading code that uses this new development
server update middleware. Within the development server, the component update
build result will be used to indicate that an event should be sent to active
clients. The build system does not yet generate component update results.
Some cloud providers, such as Cloudflare, expect the default export to follow a specific structure (e.g., an object with a `fetch` property). To prevent the need for creating a separate `server.ts` file for production builds, the request handler is now exported as `reqHandler` instead of a default export.
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
