Prior to this commit, the Vite html fallback middleware failed to handle the in-memory assets generated by Angular CLI, resulting in incorrect fallback behavior. For instance, when an `index.html` existed as an asset under a specific path, the generated `index.html` would be served instead.
This fix addresses the issue, ensuring that the appropriate `.html` is served when using the Vite dev-server.
Closes#27044
Previously, the Vite-based development server that is automatically used with the `application`
and `browser-esbuild` builders would always use prebundling if the Angular CLI caching was enabled.
The development server now has a specific `prebundle` option to allow more control over prebundling
while still allowing other forms of caching within the Angular CLI. The `prebundle` option
can be a boolean value of `true` or `false` that will enable or disable prebundling, respectively.
Additionally, the option also has an object long-form. This long-form enables prebundling and
currently contains one property named `exclude`. The `exclude` property supports cases where a
package should not be prebundled and rather should be bundled directly into the application code.
These cases are not common but can happen based on project specific requirements.
If the `prebundle` option is enabled when using the `browser` builder or any other Webpack-based
builder, it will be ignored as the Webpack-based development server does not contain such
functionality.
To support future use cases, the internal `externalPackages` application builder option now also
accepts an object form with an `exclude` array field in addition to the existing boolean value.
The `exclude` capability allows for specifying individual packages that should always be bundled
when using the external packages functionality. Currently the external packages functionality is
only used by the Vite-based development server.
Since this change 4b3a965429
A warning is displayed when using `./` as a base href
```
(!) invalid "base" option: ".". The value can only be an absolute URL, "./", or an empty string.
```
This change implements the capability to display JSON build logs in the terminal instead of a format readable by humans. This is particularly useful for hosting providers, as it allows them to effortlessly access the necessary information without having to parse the JSON configuration.
To enable this output, set the `NG_BUILD_LOGS_JSON=1` environment variable. Additionally, warnings, errors, and logs are automatically colorized when the standard output is a WritableStream. You can disable the colors by using the `FORCE_COLOR=0` environment variable.
```
FORCE_COLOR=0 NG_BUILD_LOGS_JSON=1 ng b
{
"errors": [],
"warnings": [],
"outputPaths": {
"root": "file:///usr/local/test/home//test-project/dist/test-project",
"browser": "file:///usr/local/test/home//test-project/dist/test-project/browser",
"server": "file:///usr/local/test/home//test-project/dist/test-project/server"
},
"prerenderedRoutes": [
"/"
]
}
```
```
NG_BUILD_LOGS_JSON=1 ng b
{
"errors": [],
"warnings": [],
"outputPaths": {
"root": "file:///usr/local/test/home//test-project/dist/test-project",
"browser": "file:///usr/local/test/home//test-project/dist/test-project/browser",
"server": "file:///usr/local/test/home//test-project/dist/test-project/server"
},
"prerenderedRoutes": [
"/"
]
}
```
When using the `application` builder, the usage of a custom postcss configuration is now supported.
The builder will automatically detect and use specific postcss configuration files if present in
either the project root directory or the workspace root. Files present in the project root will have
priority over a workspace root file. If using a custom postcss configuration file, the automatic
tailwind integration will be disabled. To use both a custom postcss configuration and tailwind, the
tailwind setup must be included in the custom postcss configuration file.
The configuration files must be JSON and named one of the following:
* `postcss.config.json`
* `.postcssrc.json`
A configuration file can use either an array form or an object form to setup plugins.
An example of the array form:
```
{
"plugins": [
"tailwindcss",
["rtlcss", { "useCalc": true }]
]
}
```
The same in an object form:
```
{
"plugins": {
"tailwindcss": {},
"rtlcss": { "useCalc": true }
}
}
```
NOTE: Using a custom postcss configuration may result in reduced build and rebuild
performance. Postcss will be used to process all global and component stylesheets
when a custom configuration is present. Without a custom postcss configuration,
postcss is only used for a stylesheet when tailwind is enabled and the stylesheet
requires tailwind processing.
Prior to this change in the stats table we listed all the lazy chunk, in some cases this could be hundreds of files.
With this change, we limit the number of files listed. To display all entire list of files users would need to use the `--verbose` flag.
The `elide-angular-metadata` build optimization pass have been cleaned up
and restructured to remove the need for a direct runtime dependency on `@babel/core`.
The `pure-toplevel-functions` build optimization pass have been cleaned up
and restructured to remove the need for a direct runtime dependency on `@babel/core`.
Prior to this change using an absolute path as a `output-path` resulted in the path to be combined with the workspace root instead of resolved which caused the output to be emitted in the incorrect directory or error in Windows.
Closes#26935
