fix(@ngtools/webpack): files are not being updated when using allowJs or resolveJsonModule (#13089)

* fix(@ngtools/webpack): files are not being updated when using `allowJs` or `resolveJsonModule`

Fixes #13076 and Fixes #12964

* test: add tests for allowJs and resolveJsonModule in watch mode

* test: improve tests for `allowJs`

When not using `allowJs` js files are not processed by the tsc compiler, but still processed by webpack.

So a correct test should be to check that the JS is transpiled down to ES5 syntax.

Author: alan-agius4

packages/angular_devkit/build_angular/test/browser/allow-js_spec_large.ts

@@ -7,8 +7,9 @@
  */
 
 import { runTargetSpec } from '@angular-devkit/architect/testing';
-import { tap } from 'rxjs/operators';
-import { browserTargetSpec, host } from '../utils';
+import { join, virtualFs } from '@angular-devkit/core';
+import { debounceTime, take, tap } from 'rxjs/operators';
+import { browserTargetSpec, host, outputPath } from '../utils';
 
 
 describe('Browser Builder allow js', () => {
@@ -21,11 +22,21 @@ describe('Browser Builder allow js', () => {
       'src/main.ts': `import { a } from './my-js-file'; console.log(a);`,
     });
 
-    // TODO: this test originally edited tsconfig to have `"allowJs": true` but works without it.
-    // Investigate.
+    host.replaceInFile(
+      'tsconfig.json',
+      '"target": "es5"',
+      '"target": "es5", "allowJs": true',
+    );
 
     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 a = 2');
+      }),
     ).toPromise().then(done, done.fail);
   });
 
@@ -35,10 +46,65 @@ describe('Browser Builder allow js', () => {
       'src/main.ts': `import { a } from './my-js-file'; console.log(a);`,
     });
 
+    host.replaceInFile(
+      'tsconfig.json',
+      '"target": "es5"',
+      '"target": "es5", "allowJs": true',
+    );
+
     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('var a = 2');
+      }),
+    ).toPromise().then(done, done.fail);
+  });
+
+  it('works with watch', (done) => {
+    host.writeMultipleFiles({
+      'src/my-js-file.js': `console.log(1); export const a = 2;`,
+      'src/main.ts': `import { a } from './my-js-file'; console.log(a);`,
+    });
+
+    host.replaceInFile(
+      'tsconfig.json',
+      '"target": "es5"',
+      '"target": "es5", "allowJs": true',
+    );
+
+    const overrides = { watch: true };
+
+    let buildCount = 1;
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      debounceTime(1000),
+      tap(() => {
+        const content = virtualFs.fileBufferToString(
+          host.scopedSync().read(join(outputPath, 'main.js')),
+        );
+
+        switch (buildCount) {
+          case 1:
+            expect(content).toContain('var a = 2');
+            host.writeMultipleFiles({
+              'src/my-js-file.js': `console.log(1); export const a = 1;`,
+            });
+            break;
+          case 2:
+            expect(content).toContain('var a = 1');
+            break;
+        }
+
+        buildCount++;
+      }),
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      take(2),
     ).toPromise().then(done, done.fail);
   });
+
 });

packages/angular_devkit/build_angular/test/browser/resolve-json-module_spec_large.ts

@@ -0,0 +1,60 @@
+/**
+ * @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, virtualFs } from '@angular-devkit/core';
+import { debounceTime, take, tap } from 'rxjs/operators';
+import { browserTargetSpec, host, outputPath } from '../utils';
+
+
+describe('Browser Builder resolve json module', () => {
+  beforeEach(done => host.initialize().toPromise().then(done, done.fail));
+  afterEach(done => host.restore().toPromise().then(done, done.fail));
+
+  it('works with watch', (done) => {
+    host.writeMultipleFiles({
+      'src/my-json-file.json': `{"foo": "1"}`,
+      'src/main.ts': `import * as a from './my-json-file.json'; console.log(a);`,
+    });
+
+    host.replaceInFile(
+      'tsconfig.json',
+      '"target": "es5"',
+      '"target": "es5", "resolveJsonModule": true',
+    );
+
+    const overrides = { watch: true };
+
+    let buildCount = 1;
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      debounceTime(1000),
+      tap(() => {
+        const content = virtualFs.fileBufferToString(
+          host.scopedSync().read(join(outputPath, 'main.js')),
+        );
+
+        switch (buildCount) {
+          case 1:
+            expect(content).toContain('foo":"1"');
+            host.writeMultipleFiles({
+              'src/my-json-file.json': `{"foo": "2"}`,
+            });
+            break;
+          case 2:
+            expect(content).toContain('foo":"2"');
+            break;
+        }
+
+        buildCount++;
+      }),
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      take(2),
+    ).toPromise().then(done, done.fail);
+  });
+
+});

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -145,7 +145,7 @@ export class AngularCompilerPlugin {
   private _platform: PLATFORM;
   private _JitMode = false;
   private _emitSkipped = true;
-  private _changedFileExtensions = new Set(['ts', 'tsx', 'html', 'css']);
+  private _changedFileExtensions = new Set(['ts', 'tsx', 'html', 'css', 'js', 'json']);
 
   // Webpack plugin.
   private _firstRun = true;
@@ -1060,7 +1060,7 @@ export class AngularCompilerPlugin {
           // generate a list of changed files for emit
           // not needed on first run since a full program emit is required
           for (const changedFile of this._compilerHost.getChangedFilePaths()) {
-            if (!changedFile.endsWith('.ts') && !changedFile.endsWith('.tsx')) {
+            if (!/.(tsx|ts|json|js)$/.test(changedFile)) {
               continue;
             }
             // existing type definitions are not emitted

packages/ngtools/webpack/src/compiler_host.ts

@@ -109,6 +109,15 @@ export class WebpackCompilerHost implements ts.CompilerHost {
         }
       });
     }
+
+    // In case resolveJsonModule and allowJs we also need to remove virtual emitted files
+    // both if they exists or not.
+    if ((fullPath.endsWith('.js') || fullPath.endsWith('.json'))
+      && !/(\.(ngfactory|ngstyle)\.js|ngsummary\.json)$/.test(fullPath)) {
+      if (this._memoryHost.exists(fullPath)) {
+        this._memoryHost.delete(fullPath);
+      }
+    }
   }
 
   fileExists(fileName: string, delegate = true): boolean {