When disk caching is enabled, translated i18n bundles are stored on disk, improving performance and speeding up both incremental and non-incremental builds.
In addition to the WebSocket code, the Vite client module contains helper
functions which may be injected into modules at request time. These helpers
are required for certain behavior to function. Previously, when `--no-live-reload`
was used, these helpers may not have been available which led to runtime
errors. These runtime errors will no longer occur. However, the browser console
will now log that the Vite client cannot connect to the development server
WebSocket. This is expected in this case since live reload functionality
was disabled and the server side is intentionally not available.
JS engines convert `\r\n` to `\n` in template literals, potentially leading to incorrect byte length calculations. This fix ensures the correct content length is determined.
Closes#29567
If an initial build of an application results in an error during watch mode
(including `ng serve`), the following non-error rebuild will now always be
a full build result. This ensures that all new files are available for later
incremental build result updates.
Vite 6.0 change the option location of the `preTransformRequests`
to the `dev` section of the Vite configuration. While the previous `server`
section option of the same name is still present, it currently does not
change behavior when configured.
If HMR is enabled, a component update has the potential to be unsupported
at runtime or may cause an exception. While build time analysis attempts
to verify that an update is possible, there could be cases that are as of
yet unknown. For those cases, the runtime can now signal this information
back to the development server which will clear the errant component update
and trigger a full page reload. This action will be logged to the development
server console along with an optional message from the client.
Ensures that the SSR router gives precedence to the first matching route, addressing the issue where later conflicting routes.
This change prevents the incorrect prioritization of routes and ensures the intended route is matched first, aligning routing behavior.
Closes: #29539
This commit adds support for custom route matchers in Angular SSR, allowing fine-grained control over the `renderMode` (Server, Client) for individual routes, including those defined with matchers.
Routes with custom matchers are **not** supported during prerendering and must explicitly define a `renderMode` of either server or client.
The following configuration demonstrates how to use glob patterns (including recursive `**`) to define server-side rendering (SSR) or client-side rendering (CSR) for specific parts of the 'product' route and its child routes.
```typescript
// app.routes.ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: '',
component: DummyComponent,
},
{
path: 'product',
component: DummyComponent,
children: [
{
path: '',
component: DummyComponent,
},
{
path: 'list',
component: DummyComponent,
},
{
matcher: () => null, // Example custom matcher (always returns null)
component: DummyComponent,
},
],
},
];
```
```typescript
// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{ path: '**', renderMode: RenderMode.Client },
{ path: 'product', renderMode: RenderMode.Prerender },
{ path: 'product/list', renderMode: RenderMode.Prerender },
{ path: 'product/**/overview/details', renderMode: RenderMode.Server },
];
```
Closes#29284
Switches the beasties bundling to `rules_js`, using rollup directly from
the node modules installation.
Notably we are facing a small issue that doesn't cause any issues right
now, because rollup tries to dereference symlinks by default given
a bug: https://github.com/aspect-build/rules_js/issues/1827.
This means we can't rely on the jailed resolution, but in practice it
shouldn't cause an issue at this point.
This file is currently no longer necessary after migrating all consumers
to their `rules_js` variants, so we can delete the file.
In follow-ups we will consider renaming `defaults2.bzl` back to this
file, or have a better name altogether.
Previously, when an unknown `main.js` file was requested, the system would
automatically fall back to serving the default `main.js`. This behavior
could cause unexpected issues, such as incorrect resource loading or
misleading errors.
This fix ensures that only valid `main.js` files are served, preventing
unintended fallbacks and improving request handling.
Closes#29524
When redirecting to the preferred locale, the previous implementation used the full URL for the 302 redirect to i18n subpaths based on the user's preferred locale. This update ensures that the redirect now uses the locale-specific pathname instead of the full URL.
Closes#29514
Migrates the `@angular-devkit/build-angular` tests to `rules_js`. This
was a rather larger undertaking as the tests were very reliant on e.g.
the directory structure or specific node module layout; so some changes
were needed.
- the Sass files include a much larger file header now. That is because
the npm Sass files have much larger paths, given being inside a
symlinked pnpm store directory. E.g.
```
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../../../../../node_modules/.aspect_rules_js/css-loader@7.1.2_webpack_5.97.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!../../../../../node_modules/.aspect_rules_js/postcss-loader@8.1.1_1462687623/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/test-style-a.css?ngGlobalStyle ***!
\**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.test-a {color: red}
```
- Similarly to above, hashed chunk files can change given different
paths of e.g. Webpack, or external sources.
- Tests for verifying the lazy module chunks may enable
`preserveSymlinks` just to make the chunk names shorter and easier to
verify, avoiding truncatd super long paths to the e.g. pnpm stores
again.
- the ngsw-worker.js file cannot be copied using `copyFile` as that
results in permissions being copied as well. In Bazel, now that
the npm files are properly captured, are readonly, so subsequent
builds (e.g. the watch tests) will fail to copy/override the file
again! Reading and writing the file consistently seems appropriate.
- Tests relying on puppeteer and webdriver-manager worked in the past,
by accident, because postinstall scripts (from e.g. puppeteer) were
able to modify content of other packages (e.g. the puppeteer-core
cache of browsers then). This does not work with `rules_js` anymore,
so we need to keep the cache local to the puppeteer postinstall
script. This requires a little trickery right now to ensure resolution
of the browsers at runtime works..
- server tests did miss the `node` types to be explicitly listed (as
they would be in a fresh project), and this caused failures. Likely
because we no longer patch resolution.
- avoid npm-module style imports from tests within the same package.
This is not allowed with `rules_js` and also is inconsistent.
When HMR is enabled and a component update is sent to the development server,
the following background incremental update will no longer remove the previous
JavaScript chunk files for lazy routes. This allows the active and running
application code within the browser to still access the lazy chunks referenced
in the code. This is important for cases such as when a component in a lazy
route (that has not yet been accessed) is modified. In this case, the component
update is still processed if/when the lazy route is eventually accessed via the
module-time evaluation of the component update code.
The development server now supports a WebSocket event named `angular:log`.
This event allows the browser client to send log messages back to the development
server. Currently this is unused by the client and Angular runtime. But
is intended to be used in the future for such cases as propagating error messages
back to the development server console. This event is considered internal and
should not be relied upon by external code.
This commit renames `provideServerRoutesConfig` to `provideServerRouting` and updates the second parameter to use the `ServerRoutes` features.
This change improves alignment with the framework's API conventions and the way features are integrated.
### Example Usage:
Before:
```typescript
provideServerRoutesConfig(serverRoutes, { appShellRoute: 'shell' })
```
After:
```typescript
provideServerRouting(serverRoutes, withAppShell(AppShellComponent))
```
The link to the README was relative, which caused it to break when viewed on the npm repository. The link has been updated to an absolute URL to ensure it works properly.
To support usage of the newly released Tailwind CSS 4.0.0, the peer dependency
range has been update to include `^4.0.0`. This prevents potential installation
warnings/error when using various package managers.
Use of Tailwind CSS 4+ requires either the `application` (new project default) or
`browser-esbuild` builder. Both of which support custom postcss configuration
via a `.postcssrc.json` file.
For instructions on the setup of Tailwind CSS with Angular, please see the
Tailwind CSS documentation here: https://tailwindcss.com/docs/installation/framework-guides/angular
In some cases a change to a component template may cause changes to other
aspects of the application. Tailwind, for instance, may cause changes to the
global stylesheets when class usage is changed in a template. To support hot
module replacement of the component template in these cases, stylesheet changes
are now analyzed and separated during the update process. This allows both a hot
update of the template and the global stylesheet during the rebuild instead
of the previously required full page reload.
Disables TypeScript's `removeComments` option to ensure important annotations like `/* @__PURE__ */`
and `/* vite-ignore */` are preserved. TypeScript's comment removal can be too aggressive,
potentially stripping out critical information needed by bundlers for dead code elimination.
Non-essential comments will be handled by the bundler, so removing them in TypeScript isn't necessary
and could lead to an increase in the final bundle size.
Closes#29470
Updated route matching logic to prioritize closest matches, improving the accuracy of dynamic route resolution. Also we optimized performance by eliminating unnecessary recursive checks, reducing overhead during route matching.
Closes#29452
Vite version 6.0.9+, which is now used by the Angular CLI, contains a potentially
breaking change for some development setups. Examples of such setups include those
that use reverse proxies or custom host names during development. The change within
a patch release was made by Vite to address a security vulnerability. For
projects that directly access the development server via `localhost`, no changes should
be needed. However, some development setups may now need to adjust the newly
introduced `allowedHosts` development server option. This option can include an array
of host names that are allowed to communicate with the development server. The option
sets the corresponding Vite option within the Angular CLI.
For more information on the option and its specific behavior, please see the Vite
documentation located here:
https://vite.dev/config/server-options.html#server-allowedhosts
The following is an example of the configuration option allowing `example.com`:
```
"serve": {
"builder": "@angular/build:dev-server",
"options": {
"allowedHosts": ["example.com"]
},
```
Additional details on the vulnerability can be found here:
https://github.com/vitejs/vite/security/advisories/GHSA-vg6x-rcgg-rjx6
Ensure that accessing the module after invalidation doesn't result in an empty module, which causes a `TypeError: ɵgetOrCreateAngularServerApp is not a function`.
Closes#29458
Migrates `@angular/build` tests to native `rules_js`. This involves
wiring up the package in the pnpm workspace, as well as adding some
missing dependencies that previously weren't needed due to less
efficient per-package isolation of transitive deps.
In addition, we need to explicitly specify `ssr` as dev dependency as we
are not auto-installing peer deps, and the dependency is needed for some
server SSR tests.
