The `deleteOutputPath` option will now empty specific build artifact directories instead of
removing them completely. This allows for symlinking or mounting the directories via Docker.
This is similar to the current behavior of emptying the root output path to allow similar
actions. All previous files will still be removed when the `deleteOutputPath` option is enabled.
This is useful in situations were the browser output files may be symlinked onto another
location on disk that is setup as a development server, or a Docker configuration mounts the browser
and server output to different locations on the host machine.
When using the builder harness in unit tests, expectations can now be made directly for
directories. Currently the existence, or lack thereof, can be tested using the harness.
This is similar to be existing file expectations. More capability may be added as needed
in the future.
`@import url()` to Google and Adobe fonts that are located in global and component CSS will now be inlined when using the esbuild based builders.
Input
```css
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
```
Output
```css
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
```
Closes#23054
TypeScript 5.3 provides a new programmatically accessible option on the compiler host object
to control the amount of JSDoc parsing that the TypeScript parser will perform. The `tsc`
command line tool now uses the `ParseForTypeErrors` value which only parses JSDoc comments
that may affect type checking and is considered a good default for tools such as the Angular
CLI. The Angular CLI will now attempt to use the `ParseForTypeErrors` value as well when available.
Projects will need to use TypeScript 5.3+ for this option to be available. No behavior changes will
occur on TypeScript 5.2 projects. This should not only provide a small improvement to build times
but also a reduction in overall memory usage.
This commit fixes an issue were when using a `baseHref` with trailing slash, vite dev-server would have been only accessible via a URL with a trailing slash. As vite would redirect to an error page similar to the below;
```
The server is configured with a public base URL of /myapp/ - did you mean to visit [/myapp/](http://localhost:4200/myapp/) instead?
```
Closes: #26618
To ensure that the `forceEsbuild` development server option chooses the correct underlying build implementation when
the project contains the `browser` builder within the build target, an explicit check and conversion of the builder
name is now performed during the initialization phase of the development server builder.
Vite appears to consider a port value of `0` as a falsy value and use the default Vite port of
`5173` when zero is used as a value for the development server port option. To workaround this
issue, the port checker code now explicitly handles the zero value case and determines a random
port as would be done automatically by the Webpack-based development server.
This commit enables users to disable runnings tests against a browsers. This can be done by using the `--no-browsers` command line flag or setting `browsers` to `false` in the `angular.json`
Closes#26537
`browser-sync` is now an optional dependency of `@angular-devkit/build-angular`. This package is only needed when using the legacy `@angular-devkit/build-angular:ssr-dev-server` builder.
Closes#26349
In some cases, the index.html file emitted contained the wrong contents. This because in OutputFiles there were present multiple files with the same name.
Closes#26593
The `@use` Sass directive allows Sass variables to be accessed via a namespace. This was
previously not checked when performing URL path rebasing on imported Sass stylesheets.
These type of Sass variable references are now also ignored when attempting to rebase URL
paths during loading. The final rebased URL now also does not add a leading relative prefix
indicator (`./`) unless not already present.
All specified locales in the i18n configuration for an application use the `application` or `browser-esbuild`
builders will now be normalized using the `Intl` API. This ensures that the provided locale tags are both
well-formed and correctly cased. This also more easily allowed an optimization for the default locale which
is already embedded into the framework and will now no longer be injected by the build process if active.
The Vite-based development server uses an allow list to permit access to configured assets. This list
is checked internally to Vite by using its normalized path form. To ensure that assets provided by the
build are checked correctly on all platforms, the asset list is now normalized with Vite's path
normalization prior to being used.
When using the `application` or `browser-esbuild` builders, the internal advanced optimizations
can only be applied when in AOT mode. However, they were previously only checking the AOT mode
and not whether the project was configured to use script optimizations. The advanced optimizations
are now conditional on both AOT mode and the `optimization.scripts` option. This can greatly
improve the performance of builds in development since the Babel related processing can be skipped
for all TypeScript application code.
An AbortController is now automatically linked to the `application` builder's teardown context
if one has not been provided. This supports reduced overhead in the unit tests by eliminating
the need to manually create and use an AbortController/AbortSignal in each test that uses watch
mode. Relevant tests that were previously doing this have also been updated.
When using the `application` builder with progress enabled (the default), the spinner text will
now automatically contain a trailing newline. This ensures that any diagnostic messages are not
awkwardly printed on the same line as the spinner.
This commit updates the file watcher to only use rename and change events from raw events and will otherwise rely on all events to capture other file changes.
The rename and change events are watch are triggered when using IDEs that use atomic writes. This should improve cross-platform and cross IDE compatibility.
By default, on Mac OSX chokidar will use the native darwin FSEvents API unless polling is enabled. In which case instead of listening on `raw` events we need to listen to `all` events.
This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code).
The main changes to solve the issue are;
## Replace `watcher.on('all')` with `watcher.on('raw')`
Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time, but only after a file has been changed 3 or more times.
```
watcher.on('raw')
Change 1
rename | 'C:/../src/app/app.component.css'
rename | 'C:/../src/app/app.component.css'
change | 'C:/../src/app/app.component.css'
Change 2
rename | 'C:/../src/app/app.component.css'
rename | 'C:/../src/app/app.component.css'
change | 'C:/../src/app/app.component.css'
Change 3
rename | 'C:/../src/app/app.component.css'
rename | 'C:/../src/app/app.component.css'
change | 'C:/../src/app/app.component.css'
watcher.on('all')
Change 1
change | 'C:\\..\\src\\app\\app.component.css'
Change 2
unlink | 'C:\\..\\src\\app\\app.component.css'
Change 3
... (Nothing)
```
## Handle `rename` events
Some IDEs will fire a rename event instead of unlink/changed when a file is modified}
Closes#26437
(cherry picked from commit 1725b91e357f613f7fb7547d13d6499973ee3849)
This reverts commit bbbe13d6782ba9d1b80473a98ea95bc301c48597.
Switching to `raw` event changes the event names such that some events are getting dropped and breaking watch mode rebuilds on Mac.
When using the `application` or `browser-esbuild` builders with the `dev-server`, interactive key
shortcuts are now available to use while the server is active. Once the build has successfully completed
and the development server has initialized, typing a single letter key followed by enter will execute
the associated action. These actions include forcing a browser full reload, clearing the console, or
quitting. More actions may be added in the future.
The following actions are currently available:
```
press r + enter to force reload browser
press u + enter to show server url
press o + enter to open in browser
press c + enter to clear console
press q + enter to quit
```
The `h` action is also available which will display the above list at runtime.
Prior to this change special CSS comments `/*! comment */` were being removed during minification when using the application builder. This caused tools that ran post build that rely on such comments such as purgeCSS and critters not to function properly.
We now provide a `removeSpecialComments` option to enable retention of these comments in global CSS files.
Usage example:
```json
{
"projects": {
"my-app": {
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"configurations": {
"production": {
"optimization": {
"styles": {
"removeSpecialComments": false
}
}
}
}
}
}
}
}
}
```
Closes: #26432
When using the `application` or `browser-esbuild` builders, localization errors were
previously not being propagated to the final build result. In the event that the
`i18nMissingTranslation` option was changed to error from the default of warning, the
final build result would previously indicate a success if there were any missing translations
present within the build. This has now been corrected and the build will now fully fail
including a non-zero exit code in this case.
In some cases the `$localize.locale` was being set prior to `$localize` being set through `@angular/localize`. This caused `$localize.locale` to be reset to `en-US`.
This change moves the order in which `$localize.locale` is set.
Partially addresses: #26350
This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code).
The main changes to solve the issue are;
## Replace `watcher.on('all')` with `watcher.on('raw')`
Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time, but only after a file has been changed 3 or more times.
```
watcher.on('raw')
Change 1
rename | 'C:/../src/app/app.component.css'
rename | 'C:/../src/app/app.component.css'
change | 'C:/../src/app/app.component.css'
Change 2
rename | 'C:/../src/app/app.component.css'
rename | 'C:/../src/app/app.component.css'
change | 'C:/../src/app/app.component.css'
Change 3
rename | 'C:/../src/app/app.component.css'
rename | 'C:/../src/app/app.component.css'
change | 'C:/../src/app/app.component.css'
watcher.on('all')
Change 1
change | 'C:\\..\\src\\app\\app.component.css'
Change 2
unlink | 'C:\\..\\src\\app\\app.component.css'
Change 3
... (Nothing)
```
## Handle `rename` events
Some IDEs will fire a rename event instead of unlink/changed when a file is modified}
Closes#26437
When not preserving symlinks (the default), the workspace root path should be converted
to the real path on the filesystem to ensure that resolution of all other path-based build
options reflects the actual location of the files. This ensures that typescript and esbuild
resolve files in a consistent manner and avoids hard to diagnose errors involving missing
files at build time.
When the `preserveSymlinks` option is false (the default), the tsconfig path was
passed through realpath to ensure that the TypeScript source files were resolved
correctly. However, the promise version of the Node.js API was previously used.
This version used `realpath.native` internally but the native version has numerous
behavior problems on Windows systems. This includes potential case conversion
which can result in differing cases for files within the build system and in turn
failed path comparison checks. The synchronous version is now used which has a
JavaScript implementation that does not suffer from these problems.
To minimize ambiguity, the update related log messages for the development server now consistently
indicate that the page reload, HMR update, or otherwise has actually been sent to any connected clients.
