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.
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.
Tslint has been added as an optional peer dependency which makes this check unnecessary since the package manager will issue a warning when an incorrect version is installed.
tslint is currently used by the tslint builder within this package but is not represented in the dependencies. The can lead to accidental version mismatches as well as package manager hoisting problems due to the package manager not knowing the full dependency set of the package.
karma is currently used by the karma builder within this package but is not represented in the dependencies. The can lead to accidental version mismatches as well as package manager hoisting problems due to the package manager not knowing the full dependency set of the package.
As of Angular v11, IE9 and IE10 are no longer officially supported. A warning will now be shown during builds if these browsers are requested in the project's browserslist configuration.
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"]`
