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.
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"]`
The test was previously run only in Ivy mode but with VE specific test case files. The test now also enables strict templates to ensure template type checking files are properly excluded.
BREAKING CHANGE:
Deprecated `TestLogger` has been removed. Use `logging` API from `'@angular-devkit/core'` instead.
**Note:** this change doesn't effect application developers.
BREAKING CHANGE:
Browser builder `extractCss` option default value has been changed from `false` to `true`. This is to reflect the default behaviour when this deprecated option is removed.
At the moment in AOT mode if a CommonJS dependency has transitive CommonJS dependency we are issue warning for both.
With this change we align the behaviour with JIT mode, where we issue warnings only for direct CommonJS dependencies or ES dependencies which have CommonJS dependencies.
Closes#18526
Currently, when users use either absolute paths, or path mappings in JIT mode, we issue a warning for templateUrl and styleUrl. With this change we suppress those warning.
Closes: #18057
CI performance variability can cause test flakes in rebuild tests due to the rebuilds taking longer than expected. This change increases the 500ms debounce time for the web worker rebuild tests to 1000ms to mitigate these issues.
This change ensures that classic (ES5) script's top-level function helpers do not get overwritten by other scripts top-level functions that happen to have the same name. This is not an issue when using module script types because each module has its own scope.
We have not yet deprecated the non-global locale data modules (e.g. `@angular/common/locales/fr`) so we should not be issuing warnings about developers using them.
We recently added warning suggesting that a "global" locale should be used instead, and the previous CommonJS/AMD warning about the format of these non-global modules are just confusing for the developer.
Reference: TOOL-1388
Closes: #18123
When using the `localize` option directly importing locale data from `@angular/common` is not needed because the Angular CLI will automatically include locale data. When not using the `localize` option, most likely users meant to import the global variant of the local data.
See: https://angular.io/guide/i18n#import-global-variants-of-the-locale-data
With this change we add the functionality to also match an allowed dependency against a package name. The package name is retrieved from the rawRequest.
Previously, users needed to add the request path which in some case might be a deep import. Ex: `zone.js/dist/zone-error`. With this change adding the package name example `zone.js` will suffice.
Closes: #18058
The current message clearly mentions which dependencies are CommonJS ones, but doesn't point out how to get rid of the warning if nothing can be done. This commit adds a mention of `allowedCommonJsDependencies` in the warning to help developers (as we do for `versionMismatch` for example).
These tests check the output of the global stylesheet and require a browserslist to target IE but this also triggers differential loading which is unneeded for the test.
