The experimental esbuild-based browser application builder now contains initial support for
watching input files and rebuilding the application via the `--watch` option. This initial
implemention is not yet optimized for incremental rebuilds and will perform a full rebuild
upon detection of a change. Incremental rebuild support will be added in followup changes
and will significantly improve the rebuild speed.
The `chokidar` npm package is used to perform the file watching which allows for native file-
system event based watching. Polling is also support via the `--poll` option for environments
that require it.
This change add a Sass File importer that uses Webpack resolvers to better support scenarios when node packages are not stored in node_modules, such as Yarn PNP.
In some cases the build will crash when there is a Sass error due to the fact that the `span` property on the Error instance cannot be cloned.
```
process.nextTick(() => { throw err; });
^
DataCloneError: function StaticClosure() {
} could not be cloned.
at MessagePort.<anonymous> (/node_modules/@angular-devkit/build-angular/src/sass/worker.js:61:41)
```
This commit removes the usage of environment files and `fileReplacements` in new application projects. Previously, the environment files was used to distinguish between a prod build to invoke `enableProdMode`. The `enableProdMode` however needed only for the case of JIT mode in production mode, which is a rare case as JIT mode is recommanded to be used in production.
In the CLI, calling `enableProdMode` is not needed as `ngDevMode` it's set using the minifier.
The test.ts is now included in `@angular-devkit/build-angular` and unless this needs to be customized is no longer needed to be provided.
Default config:
```js
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
errorOnUnknownElements: true,
errorOnUnknownProperties: true
});
```
Sass modern API provides faster compilations times when used in an async manner.
|Application compilation duration | Sass API and Compiler|
|-- | --|
|60852ms | dart-sass legacy sync API|
|52666ms | dart-sass modern API|
Note: https://github.com/johannesjo/super-productivity was used for benchmarking.
Prior art: http://docs/document/d/1CvEceWMpBoEBd8SfvksGMdVHxaZMH93b0EGS3XbR3_Q?resourcekey=0-vFm-xMspT65FZLIyX7xWFQ
BREAKING CHANGE:
- Deprecated support for tilde import has been removed. Please update the imports by removing the `~`.
Before
```scss
@import "~font-awesome/scss/font-awesome";
```
After
```scss
@import "font-awesome/scss/font-awesome";
```
- By default the CLI will use Sass modern API, While not recommended, users can still opt to use legacy API by setting `NG_BUILD_LEGACY_SASS=1`.
With this change we drop the `polyfills.ts` from new application projects and add the polyfills directly in the `angular.json`. This is possible as now the `polyfills` option accept an array of module specifiers.
This change also fixes another open issue (#14432) which was caused by the missing polyfills file in the library test setup.
Closes#14432
This is the ground work to be able to remove the `polyfills.ts` file which today is primarily used to add `zone.js`.
Usage examples:
```js
polyfills: ['zone.js'],
polyfills: ['zone.js', 'zone.js/testing', 'src/polyfills.ts'],
```
`require.context` is a webpack specific feature which was only needed to support the old Karma test setup.
BREAKING CHANGE: `require.context` are no longer parsed. Webpack specific features are not supported nor guaranteed to work in the future.
Prior to this change specs where found and loaded using Webpack's `require.context` API. The `require.context` is found in the users project `test.ts`. This resulted in a complex and hacky setup especially to filter tests when the `include` builder option is provided, were we had to amend the `test.ts` in memory.
With this change we find all the specs files and add them as part of the main entrypoint.
Closes#23751 and closes#22531
This commit removes the usages of `bundleDependencies` which does not correctly work as webpack will use `require` to import ESM module since we configure the server bundle to be outputted in CJS. Migrating fully to ESM is also currently not viable due to the lack of support from Domino.
Even if full ESM was possible, using this option would have resulted in a runtime overhead as Angular libraries would be linked during runtime instead of compile time.
BREAKING CHANGE:
The server builder `bundleDependencies` option has been removed. This option was used pre Ivy. Currently, using this option is unlikely to produce working server bundles.
The `externalDependencies` option can be used instead to exclude specific node_module packages from the final bundle.
Closes#23905
With this change we replace all usage of `compilation.errors `and `compilation.warnings.push` with `addError` and `addWarning` respectively.
Also, we update the helpers in build-angular to use `WebpackError` from the current compilation to avoid mismatching instances.
With this change we reduce the reliance on the TypeScript target compiler option to output a certain ECMA version. Instead we now use the browsers that are configured in the Browserslist configuration to determine which ECMA features and version are needed. This is done by passing the transpiled TypeScript to Babel preset-env.
**Note about useDefineForClassFields**: while setting this to `false` will output JavaScript which is not spec compliant, this is needed because TypeScript introduced class fields many years before it was ratified in TC39. The latest version of the spec have a different runtime behavior to TypeScript’s implementation but the same syntax. Therefore, we opt-out from using upcoming ECMA runtime behavior to better support the ECO system and libraries that depend on the non spec compliant output. One of biggest case is usages of the deprecated `@Effect` decorator by NGRX and potentially other existing code as well which otherwise would cause runtime failures. Dropping `useDefineForClassFields` will be considered in a future major releases. For more information see: https://github.com/microsoft/TypeScript/issues/45995.
BREAKING CHANGE: Internally the Angular CLI now always set the TypeScript `target` to `ES2022` and `useDefineForClassFields` to `false` unless the target is set to `ES2022` or later in the TypeScript configuration. To control ECMA version and features use the Browerslist configuration.
This commit adds an internal file to export needed symbols from `@angular/platform-server` when building a server bundle. This is needed. This is needed so that DI tokens can be referenced and set at runtime outside of the bundle.
Also, it adds a migration to remove these exports from the users files as otherwise an export collision would occur due to the same symbol being exported multiple times.
The usage of Stylus in the CLI is minimal and this package never reached version 1.
BREAKING CHANGE:
Deprecated support for Stylus has been removed. The Stylus package has never reached a stable version and its usage in the Angular CLI is minimal. It's recommended to migrate to another CSS preprocessor that the Angular CLI supports.
Remove deprecated support for ES5 output.
BREAKING CHANGE: Producing ES5 output is no longer possible. This was needed for Internet Explorer which is no longer supported. All browsers that Angular supports work with ES2015+
These new options have been introduced in Angular v14.
The commit enables the option in a new project, as we did when we introduced the `destroyAfterOption`,
with the same long term goal to have these options enabled by default.
Support for the `fileReplacements` option from the Webpack-based builder has now been integrated into
the experimental esbuild-based browser application builder. The option will no longer be ignored during
builds. Only the officially supported form of the option (`replace`/`with` fields) is implemented.
The Browserslist configuration file is redundant as we set the defaults directly in @angular-devkit/build-angular. 8da926966e/packages/angular_devkit/build_angular/src/utils/supported-browsers.ts (L12-L19)
With this commit, we remove the `.browserlistrc` configuration file from the schematics application template and through a migration in existing projects when the Browserslist query result matches the default.
Users needing a finer grain support should still create a `.browserlistrc` in the root directory of the project.
Previously, when there was an error during a build that had service workers enabled, the dev-server crashed as the promise was rejected instead of emitting a compilation error.
With this change we update the logic so that any errors during the SW augmentation phase are changed to a compilation error and also update the logic so that when there are compilation errors we don't try to generate a SW.
esbuild 0.15.6 now supports transforming `for await..of` syntax and will now be used instead of babel
when the syntax is found within code that will be bundled. Zone.js requires that all async/await
related code be downleveled to properly hook promise callbacks. esbuild does not yet support
transforming async generators and so babel is still used when async generator syntax is detected
in an input file.
esbuild 0.15.6 also adjusted the `supported` option to imply that all dependent features of a
disabled feature are disabled as well. For the CLI, this allows only needing to specify that
`async-await` is disabled in the esbuild options.
