PR #23691 introduced a regression that caused paranthesis in url not to be handled correctly.
This change correct this behaviour and adds a test case to valid this.
Closes#23773
Previously, the RegExp didn't correctly handle cases where data URIs had escaped quotes like the below
```css
url("data:image/svg+xml;charset=utf-8,<svg width=/"16/" height=/"15/"></svg>")
```
Closes#23680
With this commit, we add a middleware that handles preflight requests as currently responses for this type of requests returning 404.
This is a temporary workaround until this issue is fixed upstream. See: https://github.com/webpack/webpack-dev-server/issues/4180Closes#23639
The esbuild-based experimental builder will now leverage the bundler to perform resolution of CSS imports.
This allows for more comprehensive resolution including packages which use the `sass` and/or `style` custom
conditions within a `package.json` exports field.
This PR includes a webpack plugin which adds a field to source maps that identifies which sources are vendored or runtime-injected (aka third-party) sources. These will be consumed by Chrome DevTools to automatically ignore-list sources.
When vendor source map processing is enabled, this is interpreted as the developer intending to debug third-party code; in this case, the feature is disabled.
Signed-off-by: Victor Porof <victorporof@chromium.org>
Instead of generating the content hash based on the content of scripts BEFORE the optimization phase,
the content hash is generated AFTER the optimization phase.
Prevents caching issues where browsers block execution of scripts due to the integrity hash not matching
with the cached script in case of a script being optimized differently than in a previous build,
where it would previously result in the same content hash.
Fixes#22906
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
During testing architect isn't spawned as a new process therefore we the global state can be tained from previous runs.
`es5TargetWarningsShown` which was saved in the global state caused flakiness.
Since version 4, webpack-dev-server by default will shutdown gracefully. This results in `CTRL+C` needed to be pressed multiple times to exit the process.
See: c76b6d11a3/lib/Server.js (L1801-L1827)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`.
With this change we print out the modified and removed files when running a build in verbose mode. This can be useful to debug builds that rebuilds multiple times without an apparent file change.
In some cases `/ws` caused conflicts with local websocket connections. Hence we change the dev-server web socket path to something more specific to the Angular CLI.
Closes#23260
There is no standard for library authors to ship their library in different ES versions, which can result in vendor libraries to ship ES features which are not supported by one or more browsers that the user's application supports.
With this change, we will be downlevelling libraries based on the list of supported browsers which is configured in the browserslist configuration. Previously, we only downlevelled libraries when targeting ES5.
The TypeScript target option will not effect how the libraries get downlevelled.
Closes#23126
This can be useful to debug slow builds.
Example of output
```
LOG from build-angular.JavaScriptOptimizerPlugin
<t> optimize asset: runtime.ad5c30339e926c89.js: 221.959564 ms
<t> optimize asset: polyfills.ec3ffae5bac27204.js: 1071.080092 ms
<t> optimize asset: main.aa8a15155ca2133f.js: 3391.588635 ms
<t> optimize js assets: 3483.799739 ms
LOG from build-angular.CssOptimizerPlugin
<t> optimize asset: styles.d251c5bf54715558.css: 26.569907 ms
<t> optimize css assets: 34.441737 ms
```
```
LOG from build-angular.JavaScriptOptimizerPlugin
<i> polyfills.ec3ffae5bac27204.js restored from cache.
<i> runtime.ad5c30339e926c89.js restored from cache.
<t> optimize asset: main.69fb55a243b46bfa.js: 2618.5191210000003 ms
<t> optimize js assets: 2721.226144 ms
LOG from build-angular.CssOptimizerPlugin
<i> styles.d251c5bf54715558.css restored from cache.
<t> optimize css assets: 12.149169 ms
```
An experimental browser application builder (`browser-esbuild`) has been introduced that leverages esbuild as the bundler.
This new builder is compatible with options of the current browser application builder (`browser`) and can be enabled
for experimentation purposes by replacing the `builder` field of `@angular-devkit/build-angular:browser` from an existing
project to `@angular-devkit/build-angular:browser-esbuild`. The builder will generate an ESM-based application and
provides support for ES2015+ compatible output with ES2020 as the default.
This builder is considered experimental and is not recommended for production applications.
Currently not all `browser` builder options and capabilities are supported with this experimental builder.
Additional support for these options may be added in the future.
The following options and capabilities are not currently supported:
* Stylesheet Preprocessors (only CSS styles are supported)
* Angular JIT mode (only AOT is supported)
* Localization [`localize`]
* Watch and dev-server modes [`watch`, `poll`, etc.]
* File replacements [`fileReplacements`]
* License text extraction [`extractLicenses`]
* Bundle budgets [`budgets`]
* Global scripts [`scripts`]
* Build stats JSON output [`statsJson`]
* Deploy URL [`deployURL`]
* CommonJS module warnings (no warnings will be generated for CommonJS package usage)
* Web Workers
* Service workers [`serviceWorker`, `ngswConfigPath`]
The `glob`-based check when adding the sourcemap support packages to the karma setup was incorrectly
skipping the files due to Windows pathing issues. The `glob`-based check, however, is unneeded due
to the already present `require.resolve` checks for the sourcemap support packages which will
throw if the packages are not present.
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.
Without the `node_modules` prefix, projects named the same as the excluded package names ex: `webpack` will not compile successfully as all files under the mentioned project will be excluded from being requested by the respective loaders.
Closes#22902
With this change we replace the custom dimension 8 `AOT Enabled`, with `Angular CLI Major Version`. The motivation behind replacing this dimension is that the there is already an `aot` dimension with id 13 which serves for the same purpose.
More information to why we need a new dimension for the Angular CLI major version can be found #22130Closes#22130
Since Angular 8, the CLI has transformed decorator metadata to a form that can be used by the Angular dependency injector without the TDZ limitations of Typescript's decorator metadata emit feature.
As a result, a JIT application compiled with the CLI no longer requires the reflect metadata polyfill that was provided by `core-js`.
This polyfill was also the last remaining usage of the `core-js` package within `@angular-devkit/build-angular` which allows the `core-js` package to also be removed.
Refs: https://github.com/angular/angular-cli/pull/14473 & https://github.com/angular/angular/pull/37382
BREAKING CHANGE: Reflect metadata polyfill is no longer automatically provided in JIT mode
Reflect metadata support is not required by Angular in JIT applications compiled by the CLI.
Applications built in AOT mode did not and will continue to not provide the polyfill.
For the majority of applications, the reflect metadata polyfill removal should have no effect.
However, if an application uses JIT mode and also uses the previously polyfilled reflect metadata JavaScript APIs, the polyfill will need to be manually added to the application after updating.
To replicate the previous behavior, the `core-js` package should be manually installed and the `import 'core-js/proposals/reflect-metadata';` statement should be added to the application's `polyfills.ts` file.
.substr() is deprecated so we replace it with .slice() which works similarily but isn't deprecated
Signed-off-by: Tobias Speicher <rootcommander@gmail.com>
This change is inspired by https://github.com/karma-runner/karma-chrome-launcher/issues/154#issuecomment-986661937 which blocks Karma from launching the browsers until the compilation is complete.
This is needed especially for large applications when using code-coverage where otherwise the users would have to fine-tune several Karma timeouts such as `captureTimeout` for various environments.
Closes#22495
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`
This change addresses the `Invalid version: "15.2-15.3"` range error. We previously only handled version ranges for `ios_safari`. Now, we handle such versions for all browsers.
Closes#22606
BREAKING CHANGE:
We now issue a build time error since importing a CSS file as an ECMA module is non standard Webpack specific feature, which is not supported by the Angular CLI.
This feature was never truly supported by the Angular CLI, but has as such for visibility.
