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
With commits removes the several deprecated exceptions.
BREAKING CHANGE:
- `ContentHasMutatedException`, `InvalidUpdateRecordException`, `UnimplementedException` and `MergeConflictException` API from `@angular-devkit/core` have been removed in favor of the API from `@angular-devkit/schematics`.
- `UnsupportedPlatformException` - A custom error exception should be created instead.
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
The deprecated 'defaultProject' workspace option has been removed
BREAKING CHANGE: The deprecated `defaultProject` workspace option has been removed. The project to use will be determined from the current working directory.
When using the internal JavaScript optimizer plugin for Webpack with an
empty script file provided via the `scripts` option, the build would fail.
This was because of a safety check that was checking whether the terser
result was falsy. Since an empty string is considered falsy, the build
considered the result to be an error. The safety check now will only trigger
if the terser result is not a string value to avoid this case.
G3 is now using RXJS version 7 which makes it possible for the CLI to also be updated to RXJS 7.
NB: this change does not remove all usages of the deprecated APIs.
Closes#24371
This PR removes the internally built `UpdateBuffer` and renames
`UpdateBuffer2` (based on magic-string) to `UpdateBuffer`. This
should have little to no impact for consumers.
BREAKING CHANGE:
The depracated `UpdateBuffer` has been removed and `UpdateBuffer2`
is renamed to `UpdateBuffer`. With this change the related and
deprecated symbols `ContentCannotBeRemovedException` and `Chunk`
have also been removed.
Use promise based methods to reduce RXJS usage and boiler-platting.
BREAKING CHANGE: Several changes to the `SchemaRegistry`.
- `compile` method now returns a `Promise`.
- Deprecated `flatten` has been removed without replacement.
The following unit tests have been ported over to test the experimental esbuild-based
browser application builder:
* `extractLicenses` option
* `main` option
* `optimization.styles.inlineCritical` option
* `styles` option
* `subresourceIntegrity` option
Several individual tests involving file output logging have been temporarily disabled
until build and file output logging has been implemented for the builder.
In some cases, using the `scripts` option caused a lot of `DescriptionFileUtils.loadDescriptionFile` calls which caused a bottleneck during build times.
The why to this is still unknown, but a workaround is to use the resolver from the Webpack compilation instead of the compiler.
Closes#24634
The `zone.js` package is currently built into a module structure form that resembles
UMD-like output. This causes the CommonJS checker within the experimental esbuild-based
browser application builder to issue a warning for `zone.js` usage. Until the packaging
of `zone.js` is updated to become fully ESM, the `zone.js` package is automatically allowed
when performing the CommonJS module check.
Within the build optimizer's static member optimization pass, a class that is directly
default exported must be split into two statements: the class declaration and the
default export. This is because the pass can wrap classes in a pure annotated IIFE which
results in a variable declaration replacement and variable declarations can not be directly
default exported. Previously, the pass did this splitting manually but this was causing
later babel plugins to fail. In addition to updating the AST in this case, scoping information
also needed to be updated. To support this, a babel helper package is now used that handles
the details of the statement split operation.
Update the `TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022"` warning message to be more actionable.
Closes: #24697
With the additional of JIT mode and initial Less stylesheet support, the unit tests for the
`inlineStyleLanguage` build option can now be enabled for the experimental esbuild-based
browser application builder.
When using the experimental esbuild-based browser application builder, stylesheets written in the Less
stylesheet language can now be used throughout an application. The support allows Less stylesheets to
be used in all locations where CSS and/or Sass can be used. This includes global stylesheets and both
inline and external component styles. When using inline component styles, the `inlineLanguageStyle`
build option must be set to `less`.
Currently, import resolution within a Less stylesheet is limited to default Less behavior which does not
include full node package resolution. Full resolution behavior will be added in a future change.
The build optimizer's static class field pass will now additionally wrap
classes that contain side effect free class properties. This allows optimizers and
bundlers further along in the build pipeline to downlevel that class properties while
still retaining the ability to tree-shake the class if unused. The class properties
may need to be downleveled for a variety of reasons such as lack of browser support,
browser bugs with certain code structures, or to ensure spec-compliant runtime behavior.
The following unit tests have been ported over to test the experimental esbuild-based
browser application builder:
* `assets` option
* `outputHashing` option
* browser support behavior (`browserslist`)
Several small modifications were necessary to accommodate output file differences such
as no runtime chunk. Additionally, two tests are temporarily disabled for the `outputHashing`
tests pending implementation in the builder. These tests are the same stylesheet resource handling
file name test and no hashing of non-injected styles test.
The Builder test harness previously used the deprecated `TestProjectHost` to perform a
variety of file operations during builder unit tests. However, the `TestProjectHost` is
deprecated and uses several layers of rxjs to perform the file operations. The test harness
now uses the Node.js `fs` builtin to directly perform the file operations. This removes several
layers of indirection between the harness and the actual underlying file operations. The removal
of the rxjs operation chaining also reduces stack traces and makes debugging test issues less
complicated.
Previously, we failed the compilation when the specified patterns did not match any spec file. This breaks the case were users configure Karma to not fail on empty test suit.
Closes#24644
This commit updates changes the way polyfills and runtime are loaded from modules to scripts. This is required as otherwise Jasmine will be loaded prior to Zone.js which causes clock patching not to work.
Closes#24651
When using the experimental esbuild-based browser application builder, the `aot` build option
can now be set to `false` to enable JIT compilation mode. The JIT mode compilation operates
in a similar fashion to the Webpack-based builder in JIT mode. All external Component stylesheet
and template references are converted to static import statements and then the content is bundled
as text. All inline styles are also processed in this way as well to support inline style languages
such as Sass. This approach also has the advantage of minimizing the processing necessary during rebuilds.
In JIT watch mode, TypeScript code does not need to be reprocessed if only an external stylesheet
or template is changed.
