This commit add a new `externalDependencies` option to the experimental browser builder.
Dependencies listed in this option will not be included in the final bundle, instead the user would need to provide them at runtime using import maps or another method.
Closes#23322
Service worker augmentation of an application is now supported when using the experimental
`browser-esbuild` application builder. Both the `serviceWorker` and `ngswConfigPath` options
are now available for use.
The implementation leverages the `augmentAppWithServiceWorker` internal function that is used
by the Webpack-based builder. This function currently reads the application files from the
filesystem after all the application files are written. With the `browser-esbuild`builder, all
application files are available in-memory. This can allow a future version of the service worker
code to avoid additional file access and further improve build time performance when using a
service worker. Future work will investigate the creation of an `augmentAppWithServiceWorker`
variant that supports accessing these in-memory files.
Prepares the `@angular-devkit/build-angular` package for the eventual change of enabling the
TypeScript `useUnknownInCatchVariables` option. This option provides additional
code safety by ensuring that the catch clause variable is the proper type before
attempting to access its properties. Similar changes will be needed in the other
packages in the repository prior to enabling `useUnknownInCatchVariables`.
With this change we print out the modified and removed files when running a build in verbose mode. This can be useful to debug builds that rebuilds multiple times without an apparent file change.
Only the `replaceBootstrap` TypeScript transform is needed with the `browser-esbuild` builder.
The `replaceBootstrap` transform converts the default generated JIT bootstrap call into an AOT
bootstrap call within an application. The other transforms were used to remove the development
and JIT related metadata from the AOT compiler generated code. However, with the esbuild based
build pipeline, these will be automatically removed without the need for additional transforms
via the earlier usage of the `ngJitMode` and `ngDevMode` defines.
In some cases `/ws` caused conflicts with local websocket connections. Hence we change the dev-server web socket path to something more specific to the Angular CLI.
Closes#23260
The `es2015` exports package condition is used by `rxjs` to allow bundlers to use the ES2015-based
ESM code instead of the default of ES5-based ESM code. The ES5-based ESM code is larger in size
and harder to optimize due to the downlevelled classes. This change results in a ~5Kb size reduction
for the main bundle of a new application (129920 -> 124183).
There is no standard for library authors to ship their library in different ES versions, which can result in vendor libraries to ship ES features which are not supported by one or more browsers that the user's application supports.
With this change, we will be downlevelling libraries based on the list of supported browsers which is configured in the browserslist configuration. Previously, we only downlevelled libraries when targeting ES5.
The TypeScript target option will not effect how the libraries get downlevelled.
Closes#23126
When running protractor, previously we didn't close the dev-server correctly when there was an error which caused the process to keep running following https://github.com/angular/angular-cli/pull/23166
This can be useful to debug slow builds.
Example of output
```
LOG from build-angular.JavaScriptOptimizerPlugin
<t> optimize asset: runtime.ad5c30339e926c89.js: 221.959564 ms
<t> optimize asset: polyfills.ec3ffae5bac27204.js: 1071.080092 ms
<t> optimize asset: main.aa8a15155ca2133f.js: 3391.588635 ms
<t> optimize js assets: 3483.799739 ms
LOG from build-angular.CssOptimizerPlugin
<t> optimize asset: styles.d251c5bf54715558.css: 26.569907 ms
<t> optimize css assets: 34.441737 ms
```
```
LOG from build-angular.JavaScriptOptimizerPlugin
<i> polyfills.ec3ffae5bac27204.js restored from cache.
<i> runtime.ad5c30339e926c89.js restored from cache.
<t> optimize asset: main.69fb55a243b46bfa.js: 2618.5191210000003 ms
<t> optimize js assets: 2721.226144 ms
LOG from build-angular.CssOptimizerPlugin
<i> styles.d251c5bf54715558.css restored from cache.
<t> optimize css assets: 12.149169 ms
```
Paths within the `angular.json` file should be relative to the location of the `angular.json` file.
The `ngswConfigPath` option was incorrectly using the current working directory for a base path when
a relative configuration path was specified. Most of the time this would work as a build command usually
is executed from the root of the workspace. However, this may not always be the case and for those cases
the actual workspace root is now used to resolve the full path for the service worker configuration file.
An experimental browser application builder (`browser-esbuild`) has been introduced that leverages esbuild as the bundler.
This new builder is compatible with options of the current browser application builder (`browser`) and can be enabled
for experimentation purposes by replacing the `builder` field of `@angular-devkit/build-angular:browser` from an existing
project to `@angular-devkit/build-angular:browser-esbuild`. The builder will generate an ESM-based application and
provides support for ES2015+ compatible output with ES2020 as the default.
This builder is considered experimental and is not recommended for production applications.
Currently not all `browser` builder options and capabilities are supported with this experimental builder.
Additional support for these options may be added in the future.
The following options and capabilities are not currently supported:
* Stylesheet Preprocessors (only CSS styles are supported)
* Angular JIT mode (only AOT is supported)
* Localization [`localize`]
* Watch and dev-server modes [`watch`, `poll`, etc.]
* File replacements [`fileReplacements`]
* License text extraction [`extractLicenses`]
* Bundle budgets [`budgets`]
* Global scripts [`scripts`]
* Build stats JSON output [`statsJson`]
* Deploy URL [`deployURL`]
* CommonJS module warnings (no warnings will be generated for CommonJS package usage)
* Web Workers
* Service workers [`serviceWorker`, `ngswConfigPath`]
The `glob`-based check when adding the sourcemap support packages to the karma setup was incorrectly
skipping the files due to Windows pathing issues. The `glob`-based check, however, is unneeded due
to the already present `require.resolve` checks for the sourcemap support packages which will
throw if the packages are not present.
