This is another feature that we mentioned in the Eliminate Render Blocking Requests RFC (#18730)
Inlining of critical CSS is turned off by default. To opt-in this feature set `inlineCritical` to `true`.
Example:
```json
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"styles": {
"minify": true,
"inlineCritical": true,
}
},
```
To learn more about critical CSS see;
https://web.dev/defer-non-critical-csshttps://web.dev/extract-critical-css/
In a future version of the Angular CLI `inlineCritical` will be enabled by default.
Closes: #17966Closes: #11395Closes: #19445
Currently, Karma is reporting a failed test and the total twice in a bare CLI project:
```
12 11 2020 13:59:46.666:INFO [launcher]: Starting browser Chrome
✔ Browser application bundle generation complete.
12 11 2020 13:59:50.457:INFO [Chrome 86.0.4240.198 (Mac OS 10.15.7)]: Connected on socket F0ehOBWL6BYFqXfbAAAA with id 69358036
Chrome 86.0.4240.198 (Mac OS 10.15.7) AppComponent should render title FAILED
Error: Expected 'ponyracer app is running!' to contain 'other'.
at <Jasmine>
at UserContext.<anonymous> (src/app/app.component.spec.ts:29:65)
at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:292:1)
Chrome 86.0.4240.198 (Mac OS 10.15.7): Executed 2 of 3 (1 FAILED) (0 secs / 0.231 secs)
Chrome 86.0.4240.198 (Mac OS 10.15.7) AppComponent should render title FAILED
Error: Expected 'ponyracer app is running!' to contain 'other'.
at <Jasmine>
at UserContext.<anonymous> (src/app/app.component.spec.ts:29:65)
at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
Chrome 86.0.4240.198 (Mac OS 10.15.7): Executed 3 of 3 (1 FAILED) (0.309 secs / 0.242 secs)
TOTAL: 1 FAILED, 2 SUCCESS
TOTAL: 1 FAILED, 2 SUCCESS
```
This is a bit annoying when you have several tests failing, and tend to confuse beginners.
This commit configures the Karma HTML reporter to suppress the duplicates (both error and success), which results in only one reporter showing the failed test and total:
```
12 11 2020 14:01:43.002:INFO [launcher]: Starting browser Chrome
✔ Browser application bundle generation complete.
12 11 2020 14:01:58.728:INFO [Chrome 86.0.4240.198 (Mac OS 10.15.7)]: Connected on socket Pc0xPggxJPdC8E_LAAAA with id 54797430
Chrome 86.0.4240.198 (Mac OS 10.15.7) AppComponent should render title FAILED
Error: Expected 'ponyracer app is running!' to contain 'other'.
at <Jasmine>
at UserContext.<anonymous> (src/app/app.component.spec.ts:29:65)
at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:292:1)
Chrome 86.0.4240.198 (Mac OS 10.15.7): Executed 3 of 3 (1 FAILED) (0.331 secs / 0.252 secs)
TOTAL: 1 FAILED, 2 SUCCESS
```
The supported versions of Node.js support up to ES2018, the only reason why we don't use ES2017+ is because native `async` and `await` don't work with zone.js
See: https://github.com/angular/angular/issues/31730
With this change, we also ensure that we don't downlevel the server bundle to ES5 which is unnecessary.
Closes: #17794
With this change we update the target and module settings of various compilation units.
- We replace ES5 target in protractor. Protractor runs on Node.Js which support ES2018
- For applications we now use `ES2020` instead of `ESNext` as a module to avoid unexpected changes in behaviour
This changes also adds a migration to update existing projects and also removes `module` from the Universal tsconfig as per #17352 to enable lazy loading on the server.
BREAKING CHANGE:
The following deprecated devkit builders options have been removed:
- `skipAppShell:` This has no effect
- `evalSourceMap`: This done to improve performance in older versions of the CLI and is no longer needed
- `vendorSourceMap`: Use `sourceMap.vendor` instead
- `profile`: Use `NG_BUILD_PROFILING` environment variable instead
Previously, when using a preprocessor, resources (e.g., `url(./my-image.jpg)`) referenced in a stylesheet that was imported into another stylesheet would retain the exact URL. This would be problematic as the resource would not be at the relative location within the new combined stylesheet. With this change the resource URLs will now be adjusted to reference the origin location of the resource. This allows the resources to be found without any additional changes to the application or build process.
CSS and Less already functioned in this manner. This change brings Sass and Stylus to parity.
Fixes: #12797
Depending on CommonJS modules is know to cause optimization bailouts. With this change when running a browser build and scripts optimization is enabled we display a warning.
To suppress the warning for a particular package, users can use the `allowedCommonJsDepedencies` builder options.
Example:
```
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"allowedCommonJsDepedencies": ["bootstrap"]
},
}
```
Reference: TOOL-1328
Make anyComponentStyle budged work with all style extensions. Previously it was working only with css styles. Files with other extensions were ignored.
Change Scss output style to `expanded` as otherwise sass will remove comments that are needed for autoprefixer when webpack is in prod mode because of the following implementation in `sass-loader`:
See: 45ad0be172/src/getSassOptions.js (L68-L70)Fixes#17041
We now add non node_modules `.d.ts` as a dependency of the main chunk. This is important under Ivy, because NG metadata is now part of the declarations files ex:
```ts
export declare class FooComponent implements OnInit {
constructor();
ngOnInit(): void;
static ɵfac: i0.ɵɵFactoryDef<FooComponent>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<FooComponent, "lib-foo", never, {}, {}, never>;
}
```
Previously such files were not being added as dependency and such files didn't get invalidated when changed.
Closes#16920 and closes#16921
Pass the "grep" and "invertGrep" flags through to the Angular Protractor
builder as "jasmineNodeOpts" so that individual specs within an E2E test
file can be targeted.
Fixes#13020
Certain node packages depend on native bindings which cannot be bundled, with this fix we add a way to exclude these from being processed by the bundler.
Closes: #16348
A target of es2015 was previously assumed when using differential loading. This could result in erroneously downleveling an es2016+ output file instead of generating a new es5 output file.
