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 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.
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.
Updates the `fileReplacement` pattern to allow `.mts` and `.cts` files.
This enables support for TypeScript files with explicit ESM support.
Closes#27124
This fixes an issue were routes could not be discovered automatically in a standalone application.
This is a total overhaul of the route extraction process as instead of using `guess-parser` NPM package, we now use the Angular Router. This enables a number of exciting possibilities for the future which were not possible before.
# How it works?
The application is bootstrapped and through DI injection we get the injector and router config instance and recursively build the routes tree.
This commit adds the option to run build-optimizer on the server bundles.
This is needed as in some cases, there can be restrictions on the size of
server bundles that can be executed. One of these cases is CloudFlare workers
which by default does not work with an `ng-new` application due to the size of the
bundle mainly due to the retention of the `@angular/compiler`.
This commits add a check to display a warning when `preserveWhitespaces` is configured in `tsconfig.server.json`, as potentially this could cause issue with hydration.
This commit adds support for generating an app-shell for a standalone application.
The `main.server.ts`, will need to export a bootstrapping function that returns a `Promise<ApplicationRef>`.
Example
```ts
export default () => bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(ServerModule),
provideRouter([{ path: 'shell', component: AppShellComponent }]),
],
});
```
Remove the deprecated `outputPath` and `outputPaths` from the server and browser builder.
BREAKING CHANGE:
Deprecated `outputPath` and `outputPaths` from the server and browser builder have been removed from the builder output. Use `outputs` instead.
Note: this change does not effect application developers.
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
With this change we add the `vendorChunk` option in the server builder. This option should only be used in development as it is intended to be used to improve the incremental re-build time.
This improves the rebuild time as Webpack will have less modules to analyse during a change in the application. Below, we can see the impact this change has in a `ng new` application.
Without vendor chunking
```
$ ng run ssr-vendor:server:development --watch --no-vendor-chunk
Build at: 2022-11-14T08:42:27.089Z - Hash: 0325905b63e43ddb - Time: 15357ms
Build at: 2022-11-14T08:42:37.565Z - Hash: 05cb180a02524656 - Time: 2498ms
Build at: 2022-11-14T08:42:40.325Z - Hash: c5a6996ed1924088 - Time: 1862ms
Build at: 2022-11-14T08:42:43.043Z - Hash: 92ce99f38a769c19 - Time: 1516ms
```
With vendor chunking
```
$ ng run ssr-vendor:server:development --watch --vendor-chunk
Build at: 2022-11-14T08:43:13.631Z - Hash: 28bdfea879d01a31 - Time: 15561ms
Build at: 2022-11-14T08:43:19.396Z - Hash: cc95e2b6cb403111 - Time: 1705ms
Build at: 2022-11-14T08:43:21.296Z - Hash: 204138490668a16c - Time: 848ms
Build at: 2022-11-14T08:43:23.835Z - Hash: 4fa294b261917944 - Time: 824ms
```
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
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 change updates the analytics collector collector to use GA4 instead of UA. The motivation behind this change is that UA will stop collecting data in 2023.
BREAKING CHANGE:
`analyticsSharing` option in the global angular configuration has been
removed without replacement. This option was used to configure the Angular CLI to access to your own users' CLI usage data.
If this option is used, it can be removed using `ng config --global cli.analyticsSharing undefined`.
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 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.
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+
The use of the `@angular-devkit/core` `JsonObject` type is no longer needed to satisfy the type requirements of `@angular-devkit/architect` package builder creation functions.
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.
With every build-angular release, previously created cache entries get stale and are no longer used. This causes the cache to keep growing as older files are not purged.
With this change we automatically purge entries that have been created with older version of build-angular and can no longer be used with the current installed version.
Closes#22323
With this change we unify most of the webpack configuration into the common configuration. A number of lengthy functions and code portions have been moved into a seperate file to make the configuration easier to follow.
The architect runtime no longer requires builder options to include the JsonObject in its type definition when calling `createBuilder`. The remaining cases in this package have been removed.
With this change we deprecate deployUrl which in many case causes unexpected and undesired behaviour. Such as #12322, #21432 and #6666. This is because one of the drawbacks of deploy Url is that this url needs to be injected all over the bundles.
This option was previously introduced to handle application that only assets are hosted on a CDN. This setup is now mostly considered as legacy as it is recommended that the entire application is hosted on a CDN. That said, this legacy behaviour can still be achieved by setting the `baseHref` to the CDN address, while setting the `APP_BASE_HREF` to the application address.
Closes#12322 and closes#6666
An application's TypeScript configuration was previously being loaded multiple times in several different aspects of the build setup process. These aspects need to access specific compiler options relevant to that particular area of the setup. However, loading the configuration can be expensive due to the process also calculating the root files for the TypeScript compilation which can result in a large amount of file access. To improve the setup performance, the number of times the TypeScript configuration will be loaded has now been reduced with further reductions possible with additional refactorings.
Applications can now only be built with Ivy. However, several checks were still present in the code to determine if Ivy was enabled. Since Ivy is always enabled these checks have since become unused code and can be removed.
All Angular builders are now located within one subdirectory of the `src` directory. This organization provides better discovery of the builders and will allow builder specific code to be stored in a single area.
