Postcss's directory dependency message can use a glob pattern to reflect that multiple files
within a given directory should be watched. When calculated the complete file set, the paths
must be absolute to ensure that the watch system correctly invalidates the stylesheet being
processed.
As of esbuild v0.18.9, vendor prefixing of CSS is now supported. The esbuild target option
is generated from a project's browserslist and the vendor prefixing will reflect the configured
browsers for a project. This improvement allows for the removal of the postcss autoprefixer
plugin from the build pipeline. This can provide a performance benefit for projects especially
when project stylesheets contain nothing that would require prefixing since postcss processing can
potentially be skipped completely.
As of esbuild v0.18.8, async generators can be downleveled when not supported. This improvement
allows for the removal of the babel plugins to perform the async generator downleveling that were
previously used. This can provide a performance benefit for cases of async generator usage in
application and third-party library code.
The esbuild plugin used within the esbuild-based browser application builder will not use the
newly introduced internal `supportTestBed` AOT compiler option to disable the emit of class
metadata functions within the output code. This removes the need to perform an additional
transformation of the AOT compiler generated code to immediately remove the class metadata.
The class metadata is only needed when using TestBed with AOT generated code but testing
infrastructure within the CLI only performs unit-testing in JIT mode. In the future event,
that AOT enabled unit-testing is supported, this compiler option can be enabled for test
related builds.
A recent change to better support Tailwind CSS in watch mode unintentionally caused part
of the watch files list for stylesheets to be ignored when Tailwind and/or autoprefixer
were required to be executed. This resulted in rebuilds occurring but all stylesheet changes
were not fully propagated to the development server. This has now been corrected.
When a preload hint is added for a stylesheet that is referenced via an `@import` that has an URL that
does not contain a file extension, an `as` attribute is now correctly added to the hint to ensure that
the stylesheet is loaded properly. This case can happen when a font service URL is imported within a
initial stylesheet.
The development `NG_BUILD_MANGLE` environment variable is now supported when using the
esbuild-based browser application builder. This environment variable is intended only
for Angular CLI development and test purposes.
When using prebundling with the Vite-based development server, the Angular linker will now
correctly emit JIT module scope information. This information is required in JIT mode for
NgModules to successfully be used in an application.
Postcss plugins may provide result messages that contain stylesheet dependencies that should
be watched and should trigger a rebuild of the stylesheet being processed. These files will
now be linked to the stylesheet and will allow the provided file dependencies to be
watched and in-memory caches to be invalidated. Both the `dependency` and `dir-dependency`
postcss messages are supported.
The `cacache` package was only minimally used within the font inlining post-build
processing. The usage has now been replaced with direct filesystem access and key
hashing to cache any font files. This not only lowers the overall dependency count
but also provides a small performance improvement by removing the need to resolve,
load, and evaluate additional JavaScript at build time.
When using the esbuild-based browser application builder in watch mode (including `ng serve`),
all input files provided by the bundler via the internal metafile information will now be
watched and will trigger rebuilds if changed. This allows for files outside of the TypeScript
compilation that are also outside of the project source root to be watched. This situation
can be encountered in monorepo setups where library code is directly referenced within an application.
Currently, for RxJS v6, no conditions are available, and the ESBuild
pipeline will select the ES5 distribution based on the `module` main
field. This is fine in most cases, but applications could benefit from
better optimization with the use of the ES2015 output + there are
certain code differences that currently would cause runtime breakages
when e.g. `rxjs/testing` is used.
See: https://github.com/angular/angular-cli/issues/25405 for more details.
Fixes#25405.
esbuild 0.18.2 contains a fix that removes the need for the workaround of disabling
support for static class blocks.
Related issue: https://github.com/evanw/esbuild/issues/2950
The `entries` option should be used instead of the `includes` option to disable the
file entry based discovery for Vite's prebundling. This discovery is unneeded due
to the built application files existing only in memory.
This is in an effort to reduce errors like `"Unknown version 114 of edge (While processing: "base$0$0")"` which are caused by mismatching versions.
Closes#25377
When using the Webpack-based browser application builder with the development server, the
proxy configuration can be in an array form when using the `proxyConfig` option. This is unfortunately
not natively supported by the Vite development server used when building with the esbuild-based
browser application builder. However, the array form can be transformed into the object form.
This transformation allows for the array form of the proxy configuration to be used by both
development server implementations.
When using the esbuild-based browser application builder, the pre-existing initial file
analysis is now used to generate preload hints for any transitive initial files required
by the application. These hints are generated for both the initial JavaScript chunks and
any initial global stylesheets that may be present. These hints provide additional
information to the browser so that it can start and better prioritize fetching of files
needed to start the application.
When using the esbuild-based browser application builder, the set of initially loaded files
for the application is now calculated by analyzing potential transitively loading JavaScript
and/or CSS files. This ensures that the full set of bundled files is available for bundle
size calculations as well as further analysis in areas such as link-based hint generation in
the application's index HTML.
This also fixes a bug where non-injected `scripts` where incorrectly shown as initial files.
When running the builder in watch mode, and fetching the git repo that the project is contained in, any changes in the .git folder trigger a rebuild. This is especially annoying when the IDE that you use periodically fetches the repository, and the FETCH_HEAD file triggers the rebuild every time. With this change the folders starting with a dot will be ignored in the watcher to avoid similar issues
When running the builder in watch mode, and fetching the git repo that the project is contained in, any changes in the .git folder trigger a rebuild. This is especially annoying when the IDE that you use periodically fetches the repository, and the FETCH_HEAD file triggers the rebuild every time. With this change the .git folder will be ignored in the watcher
The index HTML generation functionality for both the Webpack-based and esbuild-based
browser application builder now supports adding link hint elements to the generated output.
This includes `prefetch`, `preload`, `modulepreload`, `preconnect`, and `dns-prefetch` hint
modes. This functionality is not yet used by builds and will be integrated within future
changes.
When using the development server with the esbuild-based browser application builder, the underlying
Vite server will now prebundle packages present in an application. During the prebundling process,
the Angular linker will also be invoked to ensure that APF packages are processed for AOT usage.
The Vite prebundling also provides automatic persistent caching of processed packages. This allows
reuse of processed packages across `ng serve` invocations. To support the use of prebundling at the
development server level, all packages are considered external from the build level. The first time
a package is used within an application there may be a short delay upon accessing the page as the
package is processed. Due to the persistent nature of the prebundling, the `ng cache` command is used
to control the use of the feature. Please note, however, disabling the cache will also disable TypeScript
incremental compilation if not otherwise specifically disabled.
The file searching within the build system (both Webpack and esbuild) now use the
`fast-glob` package for globbing which provides a small performance improvement.
Since the assets option in particular is within the critical path of the buil pipeline,
the performance benefit from the switch will be most prevalent in asset heavy projects.
As an example, the Angular Material documentation site saw the asset discovery time
reduced by over half with the switch. `fast-glob` is also the package used by Vite
which provides additional benefit by ensuring that the Angular CLI behavior matches
that of the newly integrated Vite development server.
