feat(@angular-devkit/build-angular): allow .svg files as templates

Components can now use .svg files as templates. To distinguish .svg files
in templates from .svg files used for other purposes, a new webpack
loader rule was added that tests for .component.svg and loads these
files with raw-loader. All other .svg files are loaded as before
with file-loader. For use cases and alternative solutions, see
the discussion in angular#10567

Closes angular#10567

Author: oocx

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

@@ -294,9 +294,10 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     },
     module: {
       rules: [
-        { test: /\.html$/, loader: 'raw-loader' },
+        { test: /\.(html|component.svg)$/, loader: 'raw-loader' },
         {
           test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
+          exclude: /\.component.svg$/,
           loader: 'file-loader',
           options: {
             name: `[name]${hashFormat.file}.[ext]`,

packages/angular_devkit/build_angular/test/browser/svg_spec_large.ts

@@ -0,0 +1,106 @@
+/**
+ * @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
+ */
+
+import { runTargetSpec } from '@angular-devkit/architect/testing';
+import { join, normalize, virtualFs } from '@angular-devkit/core';
+import { tap } from 'rxjs/operators';
+import { browserTargetSpec, host, outputPath } from '../utils';
+
+describe('Browser Builder allow svg', () => {
+
+  beforeEach(done => host.initialize().toPromise().then(done, done.fail));
+  afterEach(done => host.restore().toPromise().then(done, done.fail));
+
+  it('can use .component.svg as templates (uses raw-loader and does not copy .svg to dist)',
+    (done) => {
+
+    host.writeMultipleFiles({
+      './src/app.component.svg': `<svg></svg>`,
+      './src/main.ts': `declare var require: Function;
+      const x = require('./app.component.svg');
+      console.log(x);`,
+    });
+
+    runTargetSpec(host, browserTargetSpec).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const content = virtualFs.fileBufferToString(
+          host.scopedSync().read(join(outputPath, 'main.js')),
+        );
+
+        expect(content).toContain(
+          `var x = __webpack_require__(/*! ./app.component.svg */ "./app.component.svg");`);
+        expect(content).toContain('module.exports = "<svg></svg>"');
+        expect(host.scopedSync().exists(normalize('dist/app.component.svg')))
+          .toBe(false, 'should not copy app.component.svg to dist');
+      }),
+    ).toPromise().then(done, done.fail);
+  });
+
+  it('imports non-component .svg with file-loader and copies .svg to dist', (done) => {
+
+    host.writeMultipleFiles({
+      './src/other.svg': `<svg></svg>`,
+      './src/main.ts': `declare var require: Function;
+      const x = require('./other.svg');
+      console.log(x);`,
+    });
+
+    runTargetSpec(host, browserTargetSpec).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const content = virtualFs.fileBufferToString(
+          host.scopedSync().read(join(outputPath, 'main.js')),
+        );
+
+        expect(content).toContain(
+          `var x = __webpack_require__(/*! ./other.svg */ "./other.svg");`);
+        expect(content).toContain(
+          'module.exports = __webpack_require__.p + "other.svg"');
+        expect(host.scopedSync().exists(normalize('dist/other.svg')))
+          .toBe(true, 'should copy other.svg to dist');
+      }),
+    ).toPromise().then(done, done.fail);
+  });
+
+  it('works with aot',
+    (done) => {
+
+    host.writeMultipleFiles({
+      './src/app/app.component.svg': `<svg></svg>`,
+      './src/app/app.component.ts': `
+        import { Component } from '@angular/core';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.svg',
+          styleUrls: []
+        })
+        export class AppComponent {
+          title = 'app';
+        }
+      `,
+    });
+
+    const overrides = { aot: true };
+
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const content = virtualFs.fileBufferToString(
+          host.scopedSync().read(join(outputPath, 'main.js')),
+        );
+
+        expect(content).toContain('":svg:svg"');
+        expect(host.scopedSync().exists(normalize('dist/app.component.svg')))
+          .toBe(false, 'should not copy app.component.svg to dist');
+      }),
+    ).toPromise().then(done, done.fail);
+  });
+
+});