An `application` only variant of the `karma` builder found within the
`@angular-devkit/build-angular` package is now available within the
`@angular/build` package as `@angular/build:karma`. This builder will
only use the `application` builder found within `@angular/build` and
does not provide the `builderMode` option as `application` would be the
only valid value. Testing behavior is effectively equivalent to using the
`@angular-devkit/build-angular:karma` builder with the `builderMode`
option set to `application`. However, several options have been adjusted:
* `builderMode` was removed
* `fileReplacements` legacy structure (`src`/`replaceWith`) removed
* `polyfills` only accepts an array of strings
* `loader` has been added
* `define` has been added
* `externalDependencies` has been added
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.
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
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
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
By converting schemas from TypeScript `interfaces` to `types`, we can minimize the reliance on `json.JsonObject`. This approach avoids the error "Type 'Schema' does not satisfy the constraint 'JsonObject'" caused by the missing index signature for type 'string' in 'Schema'.
This is necessary as `rules_js` requires this "common name" when dealing
with Yarn workspaces, linking first party dependencies automatically.
In the future, we may be able to send a PR to `rules_js` to support a
custom name somehow.
* Removes `interop_deps` from the `ts_project` interop macro.
* Keeps `_rjs` suffix for now as we still need the interop targets for
e.g. `jasmine_node_test` and the `rules_nodejs` linker.
In follow-ups we can remove the suffix, and interop layer.
