This commit fixes and issue were standalone applications would fail during runtime because the `@angular/compiler` is not available.
We now add the `@angular/compiler` as part of the bundle when JIT mode is enabled.
When using the esbuild-based browser application builder, the output build file stat table
was incorrectly displaying non-injected global styles and scripts as initial files. These
output files will now be correctly shown as lazy files. Initial files will also now display
their respective name if available. The table entries are now sorted in descending order by
raw file size as was done in the Webpack-based builder.
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.
* 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>
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
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
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
Update the `TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022"` warning message to be more actionable.
Closes: #24697
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
Prior to this change esbuild errors during the javascript optimization phase in the Webpack builder were not being formatting properly which caused meaningful information to be lost.
Closes#24457
Sass source maps
This commits enables `sourceMapIncludeSources` when using the modern Sass API so that sources are included in generated
source map.
Closes#24394
When optimization is enabled with the `@angular-devkit/build-angular:browser` builder, terser
is used as a second phase optimizer. The terser configuration previously set its `ecma` option
to `es2020` due to all officially supported browsers supporting the version. However, it is
possible to add browsers to the browserslist configuration that are not officially supported
that still may work but do not support es2020 syntax features. By setting the terser `ecma`
option to `es2015`, terser will not turn existing syntax into newer syntax features that might
be unsupported. Terser will also not downlevel any code based on this option.
Fixes#24347
Similar to errors messages we now hide webpack paths in warnings to reduce clutter.
Before
```
./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation $weight: Passing a number without unit % (60) is deprecated.
To preserve current behavior: $weight * 1%
More info: https://sass-lang.com/d/function-units
@material/slider/_slider-theme.scss 77:5 @use
node_modules/@angular/material/slider/_slider-theme.scss 3:1 @use
node_modules/@angular/material/core/density/private/_all-density.scss 25:1 @forward
@angular/_index.scss 18:1 @use
src/styles.scss 2:1 root stylesheet
```
After
```
./src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation $weight: Passing a number without unit % (60) is deprecated.
To preserve current behavior: $weight * 1%
More info: https://sass-lang.com/d/function-units
@material/slider/_slider-theme.scss 77:5 @use
node_modules/@angular/material/slider/_slider-theme.scss 3:1 @use
node_modules/@angular/material/core/density/private/_all-density.scss 25:1 @forward
@angular/_index.scss 18:1 @use
src/styles.scss 2:1 root stylesheet
```
With this change we add a warning to inform the users that sourcemaps are not generated when both styles sourcemaps and optimization are enabled. This is because component style sourcemaps are inline which would drastically increase the bundle size.
Closes#22834
This commit fixes an issue where `@angular/platform-server/init` was added as an entry-point during the server build even when this was not installed.
Closes#24188
Enhanced resolver is unable to resolve transitive dependencies in Sass when using Yarn PNP. The main reason for this is that Sass doesn't provide context on which file is requesting the module. See: sass/sass#3247.
As a workaround for this we store previously resolved paths and when a new request comes in we try to resolve this from the previously resolved files if we are unable to resolve the request from the workspace root.
The `postcss-imports` package was previously used to support `@import` within CSS files. Unfortunately,
the package does not account for `package.json` exports fields. This prevents imports defined within that
field from working when used within a build. The `css-loader` package does provide this functionality and
is now used to provide support for CSS `@import` instead of `postcss-imports`. This change does not affect
preprocessors that provide their own import behavior.
This changes removes the need to import `@angular/platform-server/init` in the `main.server.ts` instead we now include this as an entry-point when we are bundling as server bundle.
With this change we remove the need to include the `@angular/localize/init` package as polyfills in `polyfills.ts`, `angular.json` and `main.server.ts`.
Instead when `@angular/localize/init` is included in the TypeScript `types` we add this as entry-point. The `@angular/localize/init` will be added as a parts of the `types` array in a seperate PR to address https://github.com/angular/angular/issues/47677 which is caused by the fact that `@angular/localize/init` types are no longer imported when `@angular/localize/init` is added as a polyfill in `angular.json`.
Prior to this change non relative partial files were not resolved properly. Example we did not try to resolve `@material/button/button` as `@material/button/_button` which caused the compilation to fail.
All analytics is now in the @angular/cli package
BREAKING CHANGE: analytics APIs have been removed without replacement from `@angular-devkit/core` and `@angular-devkit/architect`.
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.
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+
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.
