When using the esbuild-based build system with the service worker enabled, binary assets were
unintentionally being hashed with the assumption of UTF-8 encoding. The assets are now hashed
directly to ensure correct output hashes.
The `outExtension` option allows users to generate `*.mjs` files, which is useful for forcing ESM execution in Node under certain use cases. The option is limited to `*.js` and `*.mjs` files to constrain it to expected values. `*.cjs` could theoretically be useful in some specific situations, but `browser-esbuild` does not support that output format anyways, so it is not included in the type.
I also updated `index.html` generation, which will correctly insert a `<script />` tag with the `*.mjs` extension. I opted to explicitly ban a "non-module" `*.mjs` file, since that would be very counterintuitive and I can't think of a valid use case for it.
The output option for the long-form of the assets build option should be a relative path based
from the output path of the application. However, a rooted path was also considered relative
to the output path. To avoid two different ways of representing the path throughout the build
system. The output path is now normalized to a relative path at the beginning of the build
process.
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.
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).
The i18n inlining worker code was previously imported in several locations to allow
reuse of the options object used to configure the worker. To prevent the worker
code from being used outside of an actual worker, the options object definition is
now located in a separate file and imported in both the worker and any other files
that need to use the inlining options.
This commit changes how we set the `LOCALE_ID` when using the `localize` option
- We now include the locale setting snippet only in the main bundle.
- We use `globalThis` to set the the value globally and be accessible across module boundaries. This is important as in some causes such as when using MF `@angular/core` can be located in a bundles others than `main` and `vendor`.
The conversion of browserslist targets to esbuild targets has been updated to reflect additions
to esbuild. Additional browsers are now supported and the major/minor versions have been normalized.
The later of which ensures that `.0` major versions are not misinterpreted as ranges rather than
specific versions.
When using the experimental esbuild-based browser application builder, initial debug performance profiling
information can now be output to the console by using the `NG_BUILD_DEBUG_PERF` environment variable. When
enabled, duration information for elements of the Angular build pipeline will be shown on the console.
Certain elements marked with an asterisk postfix represent the total parallel execution time and will
not correlate directly to the total build time. This information is useful for both experimentation with
build process improvements as well as diagnosing slow builds.
The initial global stylesheet, file replacement, index HTML, and service worker option analysis and cleanup has
now been moved into the `normalizeOptions` helper for the esbuild-based browser application builder. This better
organizes the option related setup steps as well as reduces the amount of code in the main builder source file.
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`.
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'],
```
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.
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+
By default, a glob pattern starting with a forward slash will be "mounted" onto the system root. This causes globs to escape the workspace root.
With this change we configure disable glob "mounting" and also change the root to the same setting of the `cwd`.
Closes#23467
When using localization we setup `SIGINT` signal to delete the temporary directory. In some cases this resulted in delaying the process from exiting a couple of seconds.
Closes#22216
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`.
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.
During the build initialization phase, many paths are converted back and forth between multiple normalized forms. These conversions involve potentially expensive string operations. The majority of the custom path `normalize` function from `@angular-devkit/core` usages have now been removed in favor of the Node.js builtin path functions. This change reduces the need to perform additional string manipulation where possible.
`inquirer` has a number of depedencies which slow down module resolution when importing (~138ms) by lazy loading this module we remove this overhead when prompts are not needed.
.substr() is deprecated so we replace it with .slice() which works similarily but isn't deprecated
Signed-off-by: Tobias Speicher <rootcommander@gmail.com>
Node.js v12 will become EOL on 2022-04-30. As a result, Angular CLI v14 will no longer support Node.js v12.
BREAKING CHANGE:
Support for Node.js v12 has been removed as it will become EOL on 2022-04-30. Please use Node.js v14.15 or later.
During the build initialization phase, many paths are converted back and forth between multiple normalized forms. These conversions involve potentially expensive string operations. The majority of the custom path `resolve` function from `@angular-devkit/core` usages have now been removed in favor of the Node.js builtin path functions. This change reduces the need to perform additional string manipulation where possible.
BREAKING CHANGE:
The deprecated `showCircularDependencies` browser and server builder option has been removed. The recommended method to detect circular dependencies in project code is to use either a lint rule or other external tools.
In some cases unexpected files may be provided which can cause to unsupported or broken behaviour.
One such use-case is users can provide TypeScript files as `scripts` input, this would not be processed by the TypeScript compiler, see: https://github.com/angular/angular-cli/issues/17125 and would cause the build to fail with a an unhelpful error message during optimization as the JS optimizers cannot parse TypeScript input.
BREAKING CHANGE:
`browser` and `karma` builders `script` and `styles` options input files extensions are now validated.
Valid extensions for `scripts` are:
- `.js`
- `.cjs`
- `.mjs`
- `.jsx`
- `.cjsx`
- `.mjsx`
Valid extensions for `styles` are:
- `.css`
- `.less`
- `.sass`
- `.scss`
- `.styl`
Currently when making a change while serving a localized application, duplicate
translation warnings appear for every translation id. This fixes that by
replacing the whole translation object with a new one each time translations
are loaded.
fixes#22398
Previously, we used to delete the temporary emitted JS and map files. However this causes a problem in watch mode, as Webpack will not re-emit these deleted files during the next incremental re-build.
With this change we now delete the entire temporary directory when the process is being terminated instead of a file by file bases.
Closes#22395
