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.
Previously, the cached integrity values for a subsequent differential loading build would not be properly integrated. This resulted in builds with incorrect integrity values after an initial build. The cached differential loading builds will now use the correct integrity values on subsequent builds.
Closes#18254
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
For the time being we cannot use the DOM lib because it conflicts with Node, In future when we remove `yarn admin build` we should have this as a seperate compilation unit.
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.
This is the base functionality needed to inline Google fonts and Icons in HTML.
The processor does a couple of things:
1. When support for older devices is needed where woff2 is not supported it will inline definitions for both woff1 and woff2
2. Will remove comments and whitespaces when it's `minifyInlinedCSS` is enabled.
3. Cache responses so to resuse the font response during watch mode.
Note: this is still an internal implementation which users cannot leverage just yet.
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.
