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.
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
When building an application for i18n extraction we are currently redundantly processing components stylesheets. With this change we replace the components stylesheets with an empty string which helps reduce the i18n build time.
