With this change we set the publicHost to `0.0.0.0:0`, when it's not provided.
This solved issues where previously the publicHost needed to be specified directly to get around `ERR_SSL_PROTOCOL_ERROR` error when proxing https -> http.
NB: this was also the behaviour in version 10 c252968225/packages/angular_devkit/build_angular/src/dev-server/index.ts (L170)Closes#19403
With this change we cleanup the index generation. The `IndexHtmlWebpackPlugin` now extends the base `IndexHtmlGenerator` class which makes it easier to override methods to retrieve compilation assets. This is important for the critical css extraction implementation because Critters needs to access the `assets` from the either the compilation when running in memory or the file-system.
A custom babel preset is introduced to centralize the configuration of babel within the package. Application related presets and plugins are now encapsulated within the custom preset which is used via the Webpack babel-loader. This new custom preset will also provide the integration point for the upcoming Angular linker.
The source locale was intended to be used when building an application; even when not specifically localizing. This includes setting the HTML `lang` attribute, injecting locale data, and setting `LOCALE_ID` within the application.
With this change we remove webpack dev-server logic to a seperate file. We also use the webpack-dev-server API to add live-reload and hmr entry-points and settings.
When using the non-deprecated localization options, the development server was not properly setting the HTML `lang` attribute for the application. This change ensures that the active locale is used within the application's index HTML file.
Closes#18094
This fixes as issue where in some cases the changed module is not accepted which cases the dev-server to fallback to live-reload.
This is because the hmr.js and main.ts have different module ids.
With this change we inline Google fonts and icons in the index html file when optimization is enabled.
**Before**
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```
**After**
```html
<style>
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}
</style>
```
To opt-out of this feature set `optimization.fonts: false` or `optimization.fonts.inline: false` in the browser builder options.
Example:
```js
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"fonts": false
},
```
More information about the motivation for this feature can be found: https://github.com/angular/angular-cli/issues/18730
Note: internet access is required during the build for this optimization to work.
Make it possible to configure dev-server to send custom HTTP headers on
every client request. These headers can be specified as a key-value map
under the new "headers" property of the dev-server builder in
angular.json. These headers are then passed on to the webpack devserver.
An example use case for this is to enable various security features,
such as CSP and Trusted Types, both in local application development and
in integration tests, by setting appropriate HTTP headers.
This is part of an effort to add support for Trusted Types in Angular.
The ability to enforce Trusted Types during development and integration
tests is essential, as this can help detect Trusted Types violations
that might otherwise break applications when they're pushed to
production where such security features may be enforced.
With this change we deprecate servePathDefaultWarning and hmrWarning which no longer has an effect.
Using any unsupported deploy-url or base-href serve path value will result in a hard warning.
With this change we deprecate a number of dev-server builder options which proxied to the browser builder. This pattern also wrongly assumes that 3rd party browser builders also support all these options.
Configure the below deprecated options directly in the browser builder target options instead.
- aot
- sourceMap
- deployurl
- baseHref
- vendorChunk
- commonChunk
- optimization
- progress
The browser builder's `styles` and `scripts` options now support using a package name in the path when specifying a style or script. This removes the need to use a relative path to the node modules directory in these options. This provides support for Yarn PnP as well as reducing the complexity of the options especially for monorepo setups. Relatively located files will take precedence over packages if they exist. This precedence provides backwards compatibility with existing configurations.
Before :
`"styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]`
After:
`"styles": ["bootstrap/dist/css/bootstrap.css"]`
With this change we configure HMR internally and therefore users which want to use basic HMR functionality will not longer be required to change their application code.
This is important because previously a lot of users missed out on HMR or reported a broken behaviour. This also gives novice users a better chance to appreciate HMR and Angular because of the zero effort required to use HMR.
Closes#17324
Webpack 5+ no longer provides node shims by default. The dev-server builder previously assumed that Webpack would provide them. This change adds a conditional check to cover both cases.
BREAKING CHANGE:
Browser builder `extractCss` option default value has been changed from `false` to `true`. This is to reflect the default behaviour when this deprecated option is removed.
The dev-server builder will now ask the user if an available port can be used when a specified port is already in use. If the user answers in the affirmative, an available port will be used instead. Otherwise, the serve operation will fail. If the terminal is not interactive (for example, CI), the serve operation will fail directly in the event of an already in use port.
This change implements the capability to specify multiple translation files per locale. The specified translation files for each locale will be merged prior to localization. The Angular configuration file has been updated to allow for both a single path string or an array of path strings when specifying the translations for each locale. If the same message identifier is present in multiple translation files, a warning will currently be issued and the last file with the duplicate message identifier will take precedence.
Closes#18276
These changes simplify type usage in several places as well as cover more usage scenarios with alternate configuration option structures (for example, options that can be arrays or object literals)..
BREAKING CHANGE:
The following deprecated devkit builders options have been removed:
- `skipAppShell:` This has no effect
- `evalSourceMap`: This done to improve performance in older versions of the CLI and is no longer needed
- `vendorSourceMap`: Use `sourceMap.vendor` instead
- `profile`: Use `NG_BUILD_PROFILING` environment variable instead
This change reduces the workaround to a single file location as well as ensuring that only the shims of interest from the two necessary live reload files are affected. This makes sure that build and serve behavior is the same in this regard.
