To reduce the complexity of the move of the Vite-based dev-server builder
into the `@angular/build` package. The soon to be self-referencing imports
are now located in a separate file. Self-referencing imports are not well
supported inside the repository currently so this move allows the imports
to be adjusted in one location.
The index output option helper from within the Webpack-based build system has been removed
from the Vite-based development server code to support separation of the builder. This
information will eventually be passed via the build system results and the direct option
access can then be removed completely.
The dev-server builder will now only provide an interface with typed fields
for the combined set of common elements for the Webpack and Vite development
server implementations. Any additional builder specific runtime fields will
still be present and accessible.
The `@angular/build` package has been introduced to house the esbuild/Vite-based
build system that was newly introduced as stable in v17. The existing
`@angular-devkit/build-angular` package will continue to contain the Webpack-based
build system and to ensure backwards compatibility it will also provide aliases
for the esbuild/Vite-based build system. The changes here are the first stage
of the builder transition and moves the `application` builder into the new package.
The application builder can now be accessed when this package is installed directly
via `@angular/build:application`.
No changes are required for existing projects.
The application builder previously used several TypeScript compiler host augmentation helper functions
and the bootstrap replacement transformer from the `@ngtools/webpack` package. To remove reliance on
Webpack-specific functionality. The subset of helpers have been copied into the application builder
itself. Some of the helpers will eventually be removed completely pending future updates to the
Angular compiler itself.
Occasionally, when using Yarn PnP, an error message `Unable to deserialize cloned data` arises during the optimization phase of JavaScript bundles. This update rectifies the problem.
See: http://b/335203823
The builder testing infrastructure and harness has been moved out of the
`@angular-devkit/build-angular` package and into a separate bazel only
module. This allows the testing code to be shared with other packages
within the repository. It also removes test only code from within
the package that is not specific any of the included builders.
Webpack-specific types and imports have been reduced within the logic and test code for the bundle
budget calculator. This reduces the amount of unused code that needs to be loaded when not using
a Webpack-based bundler. The Webpack component style budget plugin was also updated to use only
the `checkBudgets` function instead of the previous two function setup which limits the needed
amount of runtime exports for the plugin.
Webpack-specific types and imports have been reduced within the logic for the build stats table generation.
This reduces the amount of unused code that needs to be loaded when not using a Webpack-based bundler.
This commit introduces enhancements to the Sass rebasing importer, enabling it to resolve resources whose paths are stored in variables or namespaced variables. Also this addresses an issue where URL paths in Sass and SCSS files, flagged as external, were incorrectly rebased, leading to resolution errors.
Closes#27445 and closes#27007
The i18n option creation for a project, which is a combination of the `i18n` project field and the `localize`
build option, is now in a separate file from the Webpack specific i18n configuration setup.
This allows the i18n option creation to be used without loading anything Webpack specific.
Instead of previously attempting to reuse the Webpack-based copy assets helper function,
the application builder will now only resolve all potential configured assets. This
avoids depending on non-obvious parameter behavior to prevent the actual copying of
the asset files.
BREAKING CHANGE: By default, the index.html file is no longer emitted in the browser directory when using the application builder with SSR. Instead, an index.csr.html file is emitted. This change is implemented because in many cases server and cloud providers incorrectly treat the index.html file as a statically generated page. If you still require the old behavior, you can use the `index` option to specify the `output` file name.
```json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/my-app",
"index": {
"input": "src/index.html",
"output": "index.html"
}
}
}
}
```
Both the postcss and tailwind configuration file searching during the `application` builder setup look
in the project and workspace root for one of the related configuration files. To avoid unneeded
repeat file access, both searches now reuse directory contents information.
Since the calculated cache path already contains the `@angular-devkit/build-angular` package version,
the version is not needed within the cache key for each font URL. This removes the need to import the
loaded version from the `package.json` in the font inline logic.
The build process will automatically perform package version placeholder replacement within
source files. This allows for the package version to be injected into the build cache path
creation process as a constant. As the version is now a constant, there is no need to
attempt runtime loading of the package metadata to retrieve the package version.
The babel application preset that is used with the Webpack-based build system now also uses the
updated location for the build optimizer plugins. This also reduces the amount of require statements
in the setup function for the preset.
The `assets` directory is confusing for the users and commonly users place "assets" which are not meant to be copied but instead processed by the build system. This causes some files both bundled and copied.
With this change we rename the `assets` directory to `public` and also move the `favicon.ico` inside this newly created directory.
This commit addresses a bug where SCSS files within linked directories were not being resolved correctly by the Angular CLI. By implementing the necessary adjustments, linked SCSS files are now properly resolved.
Closes#27353
This commit addresses an issue where the service worker incorrectly referenced a non-existent `index.html` when utilizing the output index option. Additionally, it ensures proper resolution of the service worker configuration when the option value is set to `true`.
The linker and build optimizer related babel plugins are now directly imported when needed
within the JavaScript transformer worker code. This lowers the number of transitive
modules that must be loaded for each worker instance. It also removes the use of `require`
from the initialization code which provides support for full ESM output in the future.
When using a non-localhost IP, Vite will correctly populate the `network` property of the `server.resolvedUrls` instead of `local`.
Example:
```
ng server --host=127.0.0.2
{ local: [], network: [ 'http://127.0.0.2:4200/' ] }
```
Closes#27327
This update modifies the 'adjust-static-class-members' Babel plugin to accommodate the wrapping of class expressions produced by esbuild. This adjustment becomes necessary as ng-packagr currently utilizes esbuild for bundling FESM.
