fix(@angular-devkit/build-angular): don't emit CSS resources during a server build

The server should serve the assets emitted by the browser builder. In fact the nguniversal schematics are configured to serve the assets from the browser folder
https://github.com/angular/universal/blob/a0cc9ab97a70370eff872664ac46391a193aa45e/modules/express-engine/schematics/install/files/__serverFileName%40stripTsExtension__.ts#L26

Closes #12878

Author: alan-agius4

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -492,6 +492,8 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
           loader: 'file-loader',
           options: {
             name: `[name]${hashFormat.file}.[ext]`,
+            // Re-use emitted files from browser builder on the server.
+            emitFile: wco.buildOptions.platform !== 'server',
           },
         },
         {

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

@@ -72,6 +72,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         loader,
         rebaseRootRelative: buildOptions.rebaseRootRelativeCssUrls,
         filename: `[name]${hashFormat.file}.[ext]`,
+        emitFile: buildOptions.platform !== 'server',
       }),
       autoprefixer(),
     ];

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/postcss-cli-resources.ts

@@ -31,6 +31,7 @@ export interface PostcssCliResourcesOptions {
   rebaseRootRelative?: boolean;
   filename: string;
   loader: webpack.loader.LoaderContext;
+  emitFile: boolean;
 }
 
 async function resolve(
@@ -53,6 +54,7 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou
     rebaseRootRelative = false,
     filename,
     loader,
+    emitFile,
   } = options;
 
   const dedupeSlashes = (url: string) => url.replace(/\/\/+/g, '/');
@@ -134,7 +136,9 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou
         }
 
         loader.addDependency(result);
-        loader.emitFile(outputPath, content, undefined);
+        if (emitFile) {
+          loader.emitFile(outputPath, content, undefined);
+        }
 
         let outputUrl = outputPath.replace(/\\/g, '/');
         if (hash || search) {

packages/angular_devkit/build_angular/test/server/base_spec_large.ts

@@ -9,7 +9,7 @@
 import { Architect } from '@angular-devkit/architect';
 import { getSystemPath, join, normalize, virtualFs } from '@angular-devkit/core';
 import { take, tap } from 'rxjs/operators';
-import { BrowserBuilderOutput } from '../../src/browser';
+import { ServerBuilderOutput } from '../../src';
 import { BundleDependencies } from '../../src/server/schema';
 import { createArchitect, host, veEnabled } from '../utils';
 
@@ -28,7 +28,7 @@ describe('Server Builder', () => {
 
   it('works (base)', async () => {
     const run = await architect.scheduleTarget(target);
-    const output = await run.result as BrowserBuilderOutput;
+    const output = await run.result as ServerBuilderOutput;
     expect(output.success).toBe(true);
 
     const fileName = join(outputPath, 'main.js');
@@ -45,7 +45,7 @@ describe('Server Builder', () => {
 
   it('should not emit polyfills', async () => {
     const run = await architect.scheduleTarget(target);
-    const output = await run.result as BrowserBuilderOutput;
+    const output = await run.result as ServerBuilderOutput;
     expect(output.success).toBe(true);
 
     expect(host.fileMatchExists(getSystemPath(outputPath), /polyfills/)).not.toBeDefined();
@@ -62,7 +62,7 @@ describe('Server Builder', () => {
     });
 
     const run = await architect.scheduleTarget(target);
-    const output = await run.result as BrowserBuilderOutput;
+    const output = await run.result as ServerBuilderOutput;
     expect(output.success).toBe(true);
 
     expect(host.fileMatchExists(getSystemPath(outputPath), /polyfills/)).not.toBeDefined();
@@ -74,7 +74,7 @@ describe('Server Builder', () => {
   it('supports sourcemaps', async () => {
     const overrides = { sourceMap: true };
     const run = await architect.scheduleTarget(target, overrides);
-    const output = await run.result as BrowserBuilderOutput;
+    const output = await run.result as ServerBuilderOutput;
     expect(output.success).toBe(true);
     expect(host.scopedSync().exists(join(outputPath, 'main.js.map'))).toBeTruthy();
     await run.stop();
@@ -92,7 +92,7 @@ describe('Server Builder', () => {
         scripts: true,
       },
     });
-    const output = await run.result as BrowserBuilderOutput;
+    const output = await run.result as ServerBuilderOutput;
     expect(output.success).toBe(true);
 
     expect(host.scopedSync().exists(join(outputPath, 'main.js.map'))).toBe(true);
@@ -120,7 +120,7 @@ describe('Server Builder', () => {
     });
 
     const run = await architect.scheduleTarget(target, overrides);
-    const output = await run.result as BrowserBuilderOutput;
+    const output = await run.result as ServerBuilderOutput;
     expect(output.success).toBe(true);
 
     expect(host.scopedSync().exists(join(outputPath, 'main.js.map'))).toBe(true);

packages/angular_devkit/build_angular/test/server/resources-output-path_spec_large.ts

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+// tslint:disable:no-big-function
+import { Architect } from '@angular-devkit/architect';
+import { join, normalize, virtualFs } from '@angular-devkit/core';
+import { ServerBuilderOutput } from '../../src';
+import { createArchitect, host } from '../utils';
+
+
+describe('Server Builder styles resources output path (No emit assets)', () => {
+  function writeFiles() {
+    host.copyFile('src/spectrum.png', './src/assets/component-img-relative.png');
+    host.copyFile('src/spectrum.png', './src/assets/component-img-absolute.png');
+    host.writeMultipleFiles({
+      'src/app/app.component.css': `
+          h3 { background: url('/assets/component-img-absolute.png'); }
+          h4 { background: url('../assets/component-img-relative.png'); }
+        `,
+    });
+  }
+
+  const target = { project: 'app', target: 'server' };
+  let architect: Architect;
+
+  const outputPath = normalize('dist-server');
+
+  beforeEach(async () => {
+    await host.initialize().toPromise();
+    architect = (await createArchitect(host.root())).architect;
+  });
+  afterEach(async () => host.restore().toPromise());
+
+  it(`supports resourcesOutputPath in resource urls`, async () => {
+    writeFiles();
+    const overrides = {
+      resourcesOutputPath: 'out-assets',
+    };
+
+    const run = await architect.scheduleTarget(target, overrides);
+    const output = await run.result as ServerBuilderOutput;
+    expect(output.success).toBe(true);
+
+    const fileName = join(outputPath, 'main.js');
+
+    const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(fileName)));
+
+    expect(content).toContain(`url('/assets/component-img-absolute.png')`);
+    expect(content).toContain(`url('out-assets/component-img-relative.png')`);
+
+    expect(host.scopedSync().exists(normalize(`${outputPath}/out-assets/component-img-relative.png`)))
+      .toBe(false);
+  });
+
+  it(`supports blank resourcesOutputPath`, async () => {
+    writeFiles();
+
+    const run = await architect.scheduleTarget(target);
+    const output = await run.result as ServerBuilderOutput;
+    expect(output.success).toBe(true);
+
+    const fileName = join(outputPath, 'main.js');
+    const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(fileName)));
+
+    expect(content).toContain(`url('/assets/component-img-absolute.png')`);
+    expect(content).toContain(`url('component-img-relative.png')`);
+
+    expect(host.scopedSync().exists(normalize(`${outputPath}/component-img-relative.png`)))
+      .toBe(false);
+  });
+});

packages/schematics/angular/utility/workspace-models.ts

@@ -43,10 +43,12 @@ export interface BrowserBuilderBaseOptions {
     sourceMap?: boolean;
 }
 
+export type OutputHashing = 'all' | 'media' | 'none' | 'bundles';
+
 export interface BrowserBuilderOptions extends BrowserBuilderBaseOptions {
     serviceWorker?: boolean;
     optimization?: boolean;
-    outputHashing?: 'all';
+    outputHashing?: OutputHashing;
     resourcesOutputPath?: string;
     extractCss?: boolean;
     namedChunks?: boolean;