1843 Commits

Author SHA1 Message Date
Charles Lyding
feb06753d5 perf(@angular-devkit/build-angular): use esbuild-based builder to directly downlevel for await...of
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.
2022-08-31 08:38:33 -04:00
Alan Agius
9aab9ad54d fix(@angular-devkit/build-angular): issue warning when using deprecated tilde imports
With this change we add a warning when using deprecated tilde/`~` imports.
2022-08-30 12:26:14 -04:00
Charles Lyding
d50d09f98d fix(@angular-devkit/build-angular): allow esbuild-based builder to use SVG Angular templates
The experimental esbuild-based browser application builder will now consider SVG files as
Angular component templates. Previously, only HTML files were considered templates and this
resulted in the esbuild-based builder to try to process the SVG file as a stylesheet.
2022-08-29 08:17:47 -04:00
Alan Agius
1c042f38a6 refactor(@angular-devkit/build-angular): remove deprecated usage of canParse
All parsers now implement `parser.analyze`.
2022-08-29 08:17:31 -04:00
Charles Lyding
2b34935727 refactor(@angular-devkit/build-angular): reorganize esbuild builder setup steps
This contains several minor adjustments to the setup steps for the experimental
esbuild-based browser application builder. It better groups the output directory
deletion and creation steps as well as moves entry point normalization into the
normalize options helper function. This should reduce the size of the main
execution function as well as aid in future profiling of the build phases.
2022-08-29 08:15:49 -04:00
Charles Lyding
b647d8069f fix(@angular-devkit/build-angular): correct esbuild builder global stylesheet sourcemap URL
The sourcemap URL in the output CSS files for global stylesheets is now correctly updated to
reflect the name of the global stylesheet output file and not the internal `stdin` virtual
file name.
2022-08-25 10:18:08 -07:00
Charles Lyding
87a61aac36 perf(@angular-devkit/build-angular): with esbuild builder only load Sass compiler when needed
Previously, the Sass compiler was imported on the start of every build regardless of its usage.
The Sass compiler will now only be loaded if a Sass stylesheet is requested.
2022-08-23 12:31:52 -07:00
Charles Lyding
a910ae992c perf(@angular-devkit/build-angular): avoid extra string creation with no sourcemaps for esbuild sass
When using the experimental esbuild-based browser application builder with Sass stylesheets, an
additional string creation for each output stylesheet will now be avoided when sourcemaps are disabled.
2022-08-23 12:31:52 -07:00
Charles Lyding
823852d8c2 refactor(@angular-devkit/build-angular): process esbuild builder global stylesheets and code at the same time
The global stylesheet processing using esbuild and the code bundling that also uses esbuild are now executed
asynchronously. Previously, the global stylesheet processing was required to wait until the code bundling was
complete before starting. Any warnings and/or errors for global stylesheets will also now be shown even if there
are errors during code bundling.
2022-08-23 12:31:14 -07:00
Charles Lyding
4f4f9c9063 refactor(@angular-devkit/build-angular): move esbuild builder global stylesheet bundling into separate function
The global stylesheet bundling and processing code has been moved out of the main builder execution function
and into a separate function. This shortens the length of the main execution function for the builder and also
allows for further refactoring to allow the code and global stylesheet bundling to be executed at the same time.
2022-08-23 12:31:14 -07:00
Alan Agius
147f8c3ebb fix(@angular-devkit/build-angular): correctly handle parenthesis in url
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
2022-08-22 16:01:14 -07:00
Alan Agius
4368c85983 refactor: remove unused local variables 2022-08-12 08:19:26 -04:00
Alan Agius
78cacc30e5 refactor(@angular-devkit/build-angular): remove workaround for handle options requests
The upstream fix https://github.com/webpack/webpack-dev-server/issues/4180 has been merged and released as part of `webpack-dev-server` version `4.10.0`
2022-08-11 09:40:42 -04:00
Charles Lyding
50c783307e fix(@angular-devkit/build-angular): use valid CSS comment for sourcemaps with Sass in esbuild builder
CSS does not support the single line JS comment (`//`) but rather only the multi-line comment (`/* */`).
When generating the sourcemap URL comment with the modern Sass API, the multi-line comment syntax will
now be used. This removes the esbuild warnings per Sass file that would have otherwise been generated
when stylesheet sourcemaps are enabled for the build.
2022-08-11 07:17:41 -04:00
Alan Agius
7de9b470cb fix(@angular-devkit/build-angular): avoid collect stats from chunks with no files
This commit updates to bundle stats logic to skip checking chunks with no files.

Closes #23717
2022-08-10 09:55:19 -04:00
Charles Lyding
f474bf532f fix(@angular-devkit/build-angular): process stylesheet resources from url tokens with esbuild browser builder
Stylesheet url tokens (`url(....)`) will now be processed when using the esbuild-based experimental browser
application builder. The paths will be resolved via the bundler's resolution system and then loaded
via the bundler's `file` loader. The functionality is implemented using an esbuild plugin to allow for all
file types to be supported without the need to manually specify each current and future file extension within
the build configuration.
The `externalDependencies` option also applies to the referenced resources. This allows for resource paths
specified with the option to remain unprocessed within the application output. This is useful if the relative
path for the resource does not exist on disk but will be available when the application is deployed.
2022-08-09 09:42:58 -04:00
Alan Agius
3fb569b5c8 feat(@angular-devkit/build-angular): switch to Sass modern API in esbuild builder
With this change we replace Sass legacy with the modern API in the experimental esbuilder. The goal is that in the next major version this change is propagated to the Webpack builder.

Based on the benchmarks that we did Sass modern API is faster compared to the legacy version.
2022-08-05 10:56:41 -07:00
Alan Agius
44c25511ea feat(@angular-devkit/build-angular): add ability to serve service worker when using dev-server
With this change we add the ability for the dev-server to serve service workers when configured in the browser builder.

Closes #9869
2022-08-04 11:26:30 -07:00
Charles Lyding
3e3dc6962d perf(@angular-devkit/build-angular): reduce babel transformation in esbuild builder
When using the experimental esbuild-based browser application builder, babel transformation
is now only performed on a file if the file requires the specific transformations enabled
for the build. This has the benefit of removing the need to parse and process files that
will not be affected by the enabled transformations.
From initial testing, this provides a 30% build time improvement for development builds of a
newly generated application and a 10% improvement for production builds.
2022-08-04 11:26:15 -07:00
Charles Lyding
8f9cee351e perf(@angular-devkit/build-angular): use esbuild in esbuild builder to downlevel native async/await
esbuild now allows specifying whether individual JavaScript features should be supported in addition
to specifying the target JavaScript version for the output. This capability is now used to provide
the native async/await downleveling that is required by Zone.js when using the experimental esbuild-
based browser application builder. Since esbuild does not yet support downleveling async iteration
or async generators, Babel is still used when either of these syntax features are detected.
2022-08-04 11:26:15 -07:00
Alan Agius
70bc35456a fix(@angular-devkit/build-angular): correctly handle data URIs with escaped quotes in stylesheets
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
2022-08-04 11:25:25 -07:00
Angular Robot
afdb266ad1 build: update all non-major dependencies 2022-08-03 10:34:50 -07:00
Alan Agius
173823d772 build: remove dependency on font-awesome
This dependency is only used to valid that node packages are resolved correctly.

With this change we mock the structure of font-awesome to avoid having to install it.
2022-08-03 09:20:29 -07:00
Alan Agius
b4a1b0f104 fix(@angular-devkit/build-angular): correctly respond to preflight requests
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/4180

Closes #23639
2022-08-02 09:47:52 -07:00
Alan Agius
cdbb48f7b2 test(@angular-devkit/build-angular): re-write live-reload tests to use new test harness.
With this change we replace the live-reload proxy tests to use the new test harness. This is an effort to reduce the flakiness of these tests.
2022-08-01 11:19:48 -07:00
Jason Bedard
35c43577d5
test: use random e2e test ports (#23541)
* test: use random e2e test ports

* test: use random ng serve ports
2022-07-28 19:23:42 +02:00
Alan Agius
8fd3e9fb3c fix(@angular-devkit/build-angular): catch clause variable is not an Error instance
Errors thrown in RxJs are not instanceof Error and therefore the check will always fail.

Closes #23631
2022-07-28 09:46:53 +02:00
Alan Agius
aa83feb373 fix(@angular-devkit/build-angular): correctly set ngDevMode in esbuilder
During development we should not set `ngDevMode` to `true`, as this is expected to be an object literal.

Closes #23627
2022-07-22 12:48:39 -04:00
Charles Lyding
6a142a22f8 fix(@angular-devkit/build-angular): allow the esbuild-based builder to fully resolve global stylesheet packages
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.
2022-07-22 10:45:31 -04:00
Victor Porof
f3087dc434 feat(@angular-devkit/build-angular): Identify third-party sources in sourcemaps
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>
2022-07-18 15:33:33 -04:00
Alan Agius
d8cfe8b226 fix(@angular-devkit/build-angular): fallback to use projectRoot when sourceRoot is missing during coverage
With this change we fallback to use the projectRoot when the sourceRoot is missing for files to be included in coverage.

Closes: #23591
2022-07-18 12:25:59 -04:00
Alan Agius
449be8868f test: update live-reload test to reduce flakes
- assign dynamic port to proxy server
- remove RXJS `finalize` in favor of `finally`
2022-07-12 10:20:26 -07:00
Charles Lyding
b3a14d0562 fix(@angular-devkit/build-angular): allow third-party sourcemaps to be ignored in esbuild builder
The `sourcemap.vendor` build option for the esbuild-based browser application builder will now
properly be considered when processing sourcemaps for third-party code (code originating from
a `node_modules` directory).
2022-07-12 10:20:12 -07:00
Charles Lyding
53dd929e59 fix(@angular-devkit/build-angular): ensure esbuild builder sourcemap sources are relative to workspace
This change adjusts the virtual output directory of the configuration for the experimental esbuild-based
browser application builder to be based on the workspace root. This allows esbuild to generate sourcemap
source paths that are relative to the workspace root and that do not contain path information from outside
the workspace root.
2022-07-12 10:20:12 -07:00
martinfrancois
357c45e484 fix(@angular-devkit/build-angular): generate different content hashes for scripts which are changed during the optimization phase
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
2022-07-12 10:19:58 -07:00
Charles Lyding
248860ad67 feat(@angular-devkit/build-angular): add Sass file support to experimental esbuild-based builder
This change adds support for using Sass stylesheets within an application built with the experimental
esbuild-based browser application builder. Global stylesheets (`styles` build option) and component
stylesheets (`@Component({ styleUrls: [...], ...})`) with Sass can now be used.
The `stylePreprocessorOptions.includePaths` option is also available for Sass stylesheets.
Both the default format (`.scss`) and the indented format (`.sass`) are supported.
Inline component stylesheet support is not yet available with the esbuild-based builder.
2022-07-11 11:52:34 -07:00
Alan Agius
d2bbcd7b68 fix(@angular-devkit/build-angular): improve detection of CommonJS dependencies
With this change we include `CommonJsSelfReferenceDependency` and `CommonJsExportsDependency` in the CJS checks.

Closes #23505
2022-07-06 16:33:21 +02:00
Charles Lyding
53e9c459d6 fix(@angular-devkit/build-angular): support hidden component stylesheet sourcemaps with esbuild builder
The hidden stylesheet option was incorrectly being ignored for component
stylesheets when using the experimental esbuild-based browser application
builder. The hidden option will now correctly not include the stylesheet
comment within the stylesheet text for components.
2022-07-01 11:43:39 -04:00
Alan Agius
88701115c6 fix(@angular-devkit/build-angular): don't override base-href in HTML when it's not set in builder
With this change we fix a regression were we  set the base-href to `/` when the browser builder `baseHref` option is not set.

Closes #23475
2022-06-30 09:07:00 -04:00
Alan Agius
7a24609143 fix(@angular-devkit/build-angular): disable glob mounting for patterns that start with a forward slash
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
2022-06-30 08:41:12 -04:00
Alan Agius
43f495d57b fix(@angular-devkit/build-angular): set base-href in service worker manifest when using i18n and app-shell
Previously, the base href was not set when using the app-shell builder and i18n.

Closes #22389
2022-06-28 16:33:17 -04:00
Alan Agius
2b962549d3 fix(@angular-devkit/build-angular): exit localized builds when CTRL+C is pressed
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
2022-06-28 10:22:15 -04:00
Alan Agius
3153f7c496 ci: remove flakey test behaviour
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.
2022-06-28 09:43:08 -04:00
Alan Agius
a69000407c refactor: clean up old ansi-colors castings
This has been fixed in https://github.com/doowb/ansi-colors/pull/44
2022-06-28 08:49:44 -04:00
Alan Agius
b40aeed441 fix(@angular-devkit/build-angular): hide stacktraces from webpack errors
In many cases Webpack will output errors with stacktraces even when `errorStack` is configured to false which bloats the terminal and makes the actual error harder to find.

With this change we output stacktraces only when using the `verbose` option.

Before
```
$ ng build

./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "invalid";
  │         ^^^^^^^^^
  ╵
  src/styles.scss 1:9  root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "invalid";
  │         ^^^^^^^^^
  ╵
  src/styles.scss 1:9  root stylesheet
    at tryRunOrWebpackError (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/Compilation.js:5051:12)
    at __webpack_require__ (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/Compilation.js:5008:18)
    at /usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/Compilation.js:5079:20
    at symbolIterator (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/neo-async/async.js:3485:9)
    at done (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/tapable/lib/Hook.js:18:14)
    at /usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/Compilation.js:4986:43
    at symbolIterator (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/neo-async/async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "invalid";
  │         ^^^^^^^^^
  ╵
  src/styles.scss 1:9  root stylesheet
    at Object.<anonymous> (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/src/styles.scss:1:7)
    at /usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/tapable/lib/Hook.js:14:14)
    at /usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/Compilation.js:5053:39
    at tryRunOrWebpackError (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/Compilation.js:5051:12)
    at __webpack_require__ (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/Compilation.js:5008:18)
    at /usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/webpack/lib/Compilation.js:5079:20
    at symbolIterator (/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/neo-async/async.js:3485:9)

Generated code for /usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!/usr/local/xxxxxxx/cli-reproductions/showwcase-v14-rc0/src/styles.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n1 │ @import \"invalid\";\n  │         ^^^^^^^^^\n  ╵\n  src/styles.scss 1:9  root stylesheet");
```

After
```
$ ng build

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "invalid";
  │         ^^^^^^^^^
  ╵
  src/styles.scss 1:9  root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "invalid";
  │         ^^^^^^^^^
  ╵
  src/styles.scss 1:9  root stylesheet
```
2022-06-27 09:08:54 -04:00
Alan Agius
4fcfc37cb9 fix(@angular-devkit/build-angular): exit dev-server when CTRL+C is pressed
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
2022-06-27 09:08:30 -04:00
Alan Agius
1fc7d4f56b fix(@angular-devkit/build-angular): ignore supported browsers during i18n extraction
Since extraction doesn't work on the browser we can ignore the `supportedBrowsers` configuration during message extraction.

Closes #23420
2022-06-23 09:56:59 -07:00
Alan Agius
a7709b718c feat(@angular-devkit/build-angular): add externalDependencies to the esbuild browser builder
This commit add a new `externalDependencies` option to the experimental browser builder.

Dependencies listed in this option will not be included in the final bundle, instead the user would need to provide them at runtime using import maps or another method.

Closes #23322
2022-06-21 12:21:53 -07:00
Alan Agius
0d50661fe6 build: add browser-esbuild test infra
This commit adds browser-esbuild infra.
2022-06-21 12:21:53 -07:00
Alan Agius
6677994235 fix(@angular-devkit/build-angular): fix incorrect glob cwd in karma when using --include option
Previously, we amended the project source root to the source root which resulted in an invalid path.

Closes #23396
2022-06-21 11:34:36 -07:00