This commits adds a base href value in the karma context iframe used to run unit tests where a unit test throws:
No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
Even if the application is fine.
This is because the index.html from Angular CLI contains a base href value, but not the Karma context iframe.
So when adding a unit test with a testing module that imports a NgModule, for example AppModule,
which itself imports RouterModule, the unit test used to throw an error (regression appeared in router 3.1).
That could be solved by either adding `RouterTestingModule` to the testing module,
or by adding a provider `{ provide: APP_BASE_HREF, useValue: '/' }`, but required to understand the issue.
This solves the issue in a transparent way: developers won't even encounter the problem anymore.
Closes#19116
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.
