When using the esbuild-based browser application builder in JIT mode, the Angular
linker will now be skipped. The runtime Angular compiler present in JIT applications
will automatically link any needed code.
When using the esbuild-based browser application builder, the `progress` option which
is enabled by default will now show an activity spinner when building/rebuilding.
When using the esbuild-based browser application builder and its newly supported development
server, the SSL related `dev-server` builder options can now be used. These include the existing
`ssl`, `sslCert`, and `sslKey` options. Additionally, if no certificate and key are provided
the `@vitejs/plugin-basic-ssl` plugin will be used to provide an auto-generated one.
The deprecated protractor builder requires that the result object from a development server
provide the port used to access the application if the port is not the default (4200). The
newly introduced esbuild development server will now provide the port when available.
When using the esbuild-based browser application builder with Less stylesheets, import rules
will now attempt to perform node package resolution if the import cannot be found as a relative
path. Built-in Less resolution is performed first to both avoid unnecessary node module resolution
overhead when not needed and also ensure Less relative import semantics continue to be supported.
When using the esbuild-based browser application builder, the `scripts` option will
now provide equivalent functionality to the current default Webpack-based builder.
The option provides full node resolution capabilities which allows both workspace
relative paths and package paths with support for the `script` exports condition.
When using the experimental esbuild-based browser application builder, the preexisting `dev-server` builder
can now be used to execute the `ng serve` command with an esbuild bundled application. The `dev-server` builder
provides an alternate development server that will execute the `browser-esbuild` builder to build the application
and then serve the output files within a development server with live reload capabilities.
This is an initial integration of the development server. It is not yet fully optimized and all features
may not yet be supported. SSL, in particular, does not yet work.
If already using the esbuild-based builder, no additional changes to the Angular configuration are required.
The `dev-server` builder will automatically detect the application builder and use the relevent development
server implementation. As the esbuild-based browser application builders is currently experimental, using
the development server in this mode is also considered experimental.
When using the esbuild-based browser application builder, the Sass worker pool
import is now lazy to prevent unnecessary module loading when Sass is not used
within an application.
When using the esbuild-based browser application builder, the stat output table was incorrectly
displaying source map files and internal component resource files such as inline stylesheets
as initial entries.
Previously when using the esbuild-based browser application builder, an empty inline
component style (`styles: ['']`) would cause the build to fail. This was due to a
bad assertion condition that has now been corrected.
When using the experimental esbuild-based browser application builder, a build
output table will now be displayed upon completion. The table is formatted to
display output file information in a similar way to the default Webpack-based
browser application builder. Estimated transfer size is currently not displayed
but will be added in a future change.
Previously when using the esbuild-based browser application, the `polyfills` option was
limited to only one entry. The option now can be used with multiple entries and has full
support for package resolution. This provides equivalent behavior to the current default
Webpack-based builder.
Based on https://github.com/angular/angular-cli/pull/24880#pullrequestreview-1347993316. Critters can generate `link` tags with inline `onload` handlers which breaks CSP. These changes update the style nonce processor to remove the `onload` handlers and replicate the behavior with an inline `script` tag that gets the proper nonce.
Note that earlier we talked about doing this through Critters which while possible, would still require a custom HTML processor, because we need to both add and remove attributes from an element.
To provide support for additional development server integration, the `dev-server` builder's
option processing has been reorganized into separate files. The main builder bootstrapping
logic has also been separated into another file. This additionally helps reduce the overall
size of the main Webpack-based development server file.
To provide support for development server integration, the esbuild-based builder can now
be setup to provide in-memory file results at the completion of a build. This applies to
both watch and non-watch modes. The result output object structure is not currently considered
part of the public API and is currently only intended to be used by other builders within the
package.
This commit removes generation of `.withServerTransition` in the universal schematic as is deprecated.
DEPRECATED: the `app-id` option in the app-shell and universal schematics has been deprecated without replacement. See: https://github.com/angular/angular/pull/49422 for more information about the rational of this change.
`compileComponents` is not necessary when using the CLI (as the templates are inlined) and just adds boilerplate code. So we can remove it from the test schematic and make it independent from `async/await` (only place we would have it in the CLI generated code, and in most Angular apps).
When using the experimental esbuild-based browser application builder, CSS stylesheets will
now be processed by tailwindcss if a tailwind configuration file is present and the `tailwindcss`
package has been installed in the project. This provides equivalent behavior to the use of tailwind
with the current default Webpack-based build system. Currently, only CSS stylesheets are processed.
Preprocessor support including Sass and Less will be added in a future change.
As a preparation step to allow for in-memory build outputs to support the development server,
The output result files of the build are now written to the file system in one location. This
includes the generated files from the bundling steps as well as any assets and service worker
files.
Companion change to https://github.com/angular/angular/pull/49444. Adds an HTML processor that finds the `ngCspNonce` attribute and copies its value to any inline `style` tags in the HTML. The processor runs late in the processing pipeline in order to pick up any `style` tag that might've been added by other processors (e.g. critical CSS).
When using the experimental esbuild-based browser application builder, CSS stylesheets
will now be processed by the postcss autoprefixer plugin. The autoprefixer plugin will only
be used if the browsers provided by browserslist require prefixes to be added. This avoids
unnecessary stylesheet parsing and processing if no additional prefixes are needed.
Currently, only CSS stylesheets are processed. Preprocessor support including Sass and Less
will be added in a future change.
This commit adds support for generating an app-shell for a standalone application.
The `main.server.ts`, will need to export a bootstrapping function that returns a `Promise<ApplicationRef>`.
Example
```ts
export default () => bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(ServerModule),
provideRouter([{ path: 'shell', component: AppShellComponent }]),
],
});
```
* fix(@angular-devkit/build-angular): set public class fields as properties
Configure Babel to use `setPublicClassFields: true`. As when shipping Angular packages without `"useDefineForClassFields": false` will increase the bundle size of an ng-new app
by ~2Kb when `useDefineForClassFields` is not false. due to the additional `_defineProperty`, which will be added on every class property.
See: https://babeljs.io/docs/babel-plugin-proposal-class-properties
* fixup! fix(@angular-devkit/build-angular): set public class fields as properties
Co-authored-by: Charles <19598772+clydin@users.noreply.github.com>
---------
Co-authored-by: Charles <19598772+clydin@users.noreply.github.com>
The experimental esbuild-based browser application builder now contains a test to ensure
that the TypeScript `resolveJsonModule` option works as expected.
Prior to this commit, we only wrapped classes with static properties that were marked with `/*@__PURE__*/` comment due to a bug in the `adjust-static-class-members` Babel plugin were we did not call the `Identifier` name text to the `canWrapProperty` function.
The `index.ts` file for the `dev-server` builder was becoming quite large and it was not
obvious what was exported for external usage and what was exported to support testing.
This change also allows for future extension of the development server without bringing in
all of the Webpack-specific functionality.
The build optimizer's static field pass will now additionally wrap classes that contain side effect free TypeScript ES2022 static class properties.
This is needed to update APF to ship ES2022, which have `useDefineForClassFields` set to `false`.
Remove the deprecated `outputPath` and `outputPaths` from the server and browser builder.
BREAKING CHANGE:
Deprecated `outputPath` and `outputPaths` from the server and browser builder have been removed from the builder output. Use `outputs` instead.
Note: this change does not effect application developers.
Webpack errors can sometimes be several hundred of thousands of characters long as it may contain the entire bundle. This can cause a ReDoS. This change improves the way we parse and remove stack traces from error messages.
Closes#24771
The following unit tests have been ported over to test the experimental esbuild-based
browser application builder:
* `baseHref` option
* `crossOrigin` option
* TypeScript path mapping behavior
