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.
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.
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
The license extraction plugin is currently causing errors when building/serving with Webpack 5. This change temporarily disables the option when Webpack 5 is used until further investigation can take place and to unblock initial Webpack 5 support.
This change adds helpers to allow the Webpack configuration to be automatically adjusted based on the Webpack version in use.
These helpers are then used to provide configuration compatibility for Webpack 5 which has several differences to the Webpack 4 configuration.
Behavior is maintained between the two versions so that external option behavior is not altered.
