feat: enable inlining of critical CSS optimizations

This is another feature that we mentioned in the Eliminate Render Blocking Requests RFC (angular/angular-cli#18730)

**Prerendering**
To enable critical css inlining for prerendering set the `inlineCritical` to true under the Browser Builder options.

Example:
```json
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": {
      "styles": {
        "minify": true,
        "inlineCritical": true,
       }
    },
```

**Express Engine**
Update server.ts
```ts
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    inlineCriticalCss: true,
  }));
```

**Hapi Engine**
Update server.ts
```ts
  server.route({
    method: 'GET',
    path: '/{path*}',
    handler: (req: Request) => ngHapiEngine({
      bootstrap: AppServerModule,
      documentFilePath,
      publicPath: distFolder,
      inlineCriticalCss: true,
      req,
    })
  });
```

Inlining of critical CSS is turned off by default. In a future versions of the Angular CLI and Universal inline critical CSS will be enabled by default.

Closes #974

Author: alan-agius4

integration/express-engine-ivy-prerender/package.json

@@ -20,6 +20,9 @@
     "build": "ng build --prod && ng run express-engine-ivy-prerender:server:production"
   },
   "private": true,
+  "resolutions": {
+    "@nguniversal/common": "file:../../dist/modules-dist/common"
+  },
   "dependencies": {
     "@angular/animations": "file:../../node_modules/@angular/animations",
     "@angular/common": "file:../../node_modules/@angular/common",

integration/express-engine-ivy/e2e/src/app.e2e-spec.ts

@@ -52,6 +52,18 @@ describe('Hello world E2E Tests', () => {
     const serverDiv = browser.driver.findElement(by.css('span.href-check'));
     expect(serverDiv.getText()).toMatch('//localhost:4200');
 
+    // Make sure there were no client side errors.
+    verifyNoBrowserErrors();
+   });
+
+  it('stylesheets should be configured to load asynchronously', async () => {
+    // Load the page without waiting for Angular since it is not bootstrapped automatically.
+    await browser.driver.get(browser.baseUrl);
+
+    // Test the contents from the server.
+    const styleTag = browser.driver.findElement(by.css('link[rel="stylesheet"]'));
+    expect(styleTag.getAttribute('media')).toMatch('all');
+
     // Make sure there were no client side errors.
     verifyNoBrowserErrors();
    });

integration/express-engine-ivy/package.json

@@ -19,6 +19,9 @@
     "build": "ng build --prod && ng run express-engine-ivy:server:production"
   },
   "private": true,
+  "resolutions": {
+    "@nguniversal/common": "file:../../dist/modules-dist/common"
+  },
   "dependencies": {
     "@angular/animations": "file:../../node_modules/@angular/animations",
     "@angular/common": "file:../../node_modules/@angular/common",

integration/express-engine-ivy/server.ts

@@ -17,6 +17,7 @@ export function app(): express.Express {
   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
   server.engine('html', ngExpressEngine({
     bootstrap: AppServerModule,
+    inlineCriticalCss: true,
   }));
 
   server.set('view engine', 'html');

integration/express-engine-ivy/src/styles.css

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+.foo {
+    color: red;
+}

integration/express-engine-ve/package.json

@@ -19,6 +19,9 @@
     "build": "ng build --prod && ng run express-engine-ve:server:production"
   },
   "private": true,
+  "resolutions": {
+    "@nguniversal/common": "file:../../dist/modules-dist/common"
+  },
   "dependencies": {
     "@angular/animations": "file:../../node_modules/@angular/animations",
     "@angular/common": "file:../../node_modules/@angular/common",

integration/hapi-engine-ivy/e2e/src/app.e2e-spec.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {browser, by, element} from 'protractor';
+import { browser, by, element } from 'protractor';
 
-import {verifyNoBrowserErrors, waitForAppRootElement} from './util';
+import { verifyNoBrowserErrors, waitForAppRootElement } from './util';
 
 describe('Hello world E2E Tests', () => {
   beforeAll(async () => {
@@ -54,5 +54,17 @@ describe('Hello world E2E Tests', () => {
 
     // Make sure there were no client side errors.
     verifyNoBrowserErrors();
-   });
+  });
+
+  it('stylesheets should be configured to load asynchronously', async () => {
+    // Load the page without waiting for Angular since it is not bootstrapped automatically.
+    await browser.driver.get(browser.baseUrl);
+
+    // Test the contents from the server.
+    const styleTag = browser.driver.findElement(by.css('link[rel="stylesheet"]'));
+    expect(styleTag.getAttribute('media')).toMatch('all');
+
+    // Make sure there were no client side errors.
+    verifyNoBrowserErrors();
+  });
 });

integration/hapi-engine-ivy/package.json

@@ -19,6 +19,9 @@
     "build": "ng build --prod && ng run hapi-engine-ivy:server:production"
   },
   "private": true,
+  "resolutions": {
+    "@nguniversal/common": "file:../../dist/modules-dist/common"
+  },
   "dependencies": {
     "@angular/animations": "file:../../node_modules/@angular/animations",
     "@angular/common": "file:../../node_modules/@angular/common",

integration/hapi-engine-ivy/server.ts

@@ -4,7 +4,7 @@ import { ngHapiEngine } from '@nguniversal/hapi-engine';
 import * as inert from '@hapi/inert';
 import { Request, Server, ResponseToolkit } from '@hapi/hapi';
 import { join } from 'path';
-import { readFileSync, existsSync } from 'fs';
+import { existsSync } from 'fs';
 
 import { AppServerModule } from './src/main.server';
 
@@ -21,15 +21,18 @@ export async function app() {
     },
   });
 
-  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index.html';
-  const document = readFileSync(join(distFolder, indexHtml), 'utf-8');
+  const documentFilePath = existsSync(join(distFolder, 'index.original.html'))
+    ? join(distFolder, 'index.original.html')
+    : join(distFolder, 'index.html');
 
   server.route({
     method: 'GET',
     path: '/{path*}',
     handler: (req: Request) => ngHapiEngine({
       bootstrap: AppServerModule,
-      document,
+      documentFilePath,
+      publicPath: distFolder,
+      inlineCriticalCss: true,
       req,
     })
   });

integration/hapi-engine-ivy/src/styles.css

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+.foo {
+    color: red;
+}