feat(compiler-cli): add watch mode to ngc (#18818)

With this change ngc now accepts a `-w` or a `--watch`
command-line option that will automatically perform a
recompile whenever any source files change on disk.

PR Close #18818

packages/compiler-cli/test/main_spec.ts

@@ -9,8 +9,9 @@
 import {makeTempDir} from '@angular/tsc-wrapped/test/test_support';
 import * as fs from 'fs';
 import * as path from 'path';
+import * as ts from 'typescript';
 
-import {main} from '../src/main';
+import {main, watchMode} from '../src/main';
 
 function getNgRootDir() {
   const moduleFilename = module.filename.replace(/\\/g, '/');
@@ -309,4 +310,156 @@ describe('compiler-cli with disableTransformerPipeline', () => {
           .catch(e => done.fail(e));
     });
   });
+
+  describe('watch mode', () => {
+    let timer: (() => void)|undefined = undefined;
+    let results: ((message: string) => void)|undefined = undefined;
+    let originalTimeout: number;
+
+    function trigger() {
+      const delay = 1000;
+      setTimeout(() => {
+        const t = timer;
+        timer = undefined;
+        if (!t) {
+          fail('Unexpected state. Timer was not set.');
+        } else {
+          t();
+        }
+      }, delay);
+    }
+
+    function whenResults(): Promise<string> {
+      return new Promise(resolve => {
+        results = message => {
+          resolve(message);
+          results = undefined;
+        };
+      });
+    }
+
+    function errorSpy(message: string): void {
+      if (results) results(message);
+    }
+
+    beforeEach(() => {
+      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+      jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+      const timerToken = 100;
+      spyOn(ts.sys, 'setTimeout').and.callFake((callback: () => void) => {
+        timer = callback;
+        return timerToken;
+      });
+      spyOn(ts.sys, 'clearTimeout').and.callFake((token: number) => {
+        if (token == timerToken) {
+          timer = undefined;
+        }
+      });
+
+      write('greet.html', `<p class="greeting"> Hello {{name}}!</p>`);
+      write('greet.css', `p.greeting { color: #eee }`);
+      write('greet.ts', `
+        import {Component, Input} from '@angular/core';
+
+        @Component({
+          selector: 'greet',
+          templateUrl: 'greet.html',
+          styleUrls: ['greet.css']
+        })
+        export class Greet {
+          @Input()
+          name: string;
+        }
+      `);
+
+      write('app.ts', `
+        import {Component} from '@angular/core'
+
+        @Component({
+          selector: 'my-app',
+          template: \`
+            <div>
+              <greet [name]='name'></greet>
+            </div>
+          \`,
+        })
+        export class App {
+          name:string;
+          constructor() {
+            this.name = \`Angular!\`
+          }
+        }`);
+
+      write('module.ts', `
+        import {NgModule} from '@angular/core';
+        import {Greet} from './greet';
+        import {App} from './app';
+
+        @NgModule({
+          declarations: [Greet, App]
+        })
+        export class MyModule {}
+      `);
+    });
+
+    afterEach(() => { jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout; });
+
+    function writeAppConfig(location: string) {
+      writeConfig(`{
+            "extends": "./tsconfig-base.json",
+            "compilerOptions": {
+              "outDir": "${location}"
+            }
+          }`);
+    }
+
+    function expectRecompile(cb: () => void) {
+      return (done: DoneFn) => {
+        writeAppConfig('dist');
+        const compile = watchMode({p: basePath}, errorSpy);
+
+        return new Promise(resolve => {
+          compile.ready(() => {
+            cb();
+
+            // Allow the watch callbacks to occur and trigger the timer.
+            trigger();
+
+            // Expect the file to trigger a result.
+            whenResults().then(message => {
+              expect(message).toMatch(/File change detected/);
+              compile.close();
+              done();
+              resolve();
+            });
+          });
+        });
+      };
+    }
+
+    it('should recompile when config file changes', expectRecompile(() => writeAppConfig('dist2')));
+
+    it('should recompile when a ts file changes', expectRecompile(() => {
+         write('greet.ts', `
+          import {Component, Input} from '@angular/core';
+
+          @Component({
+            selector: 'greet',
+            templateUrl: 'greet.html',
+            styleUrls: ['greet.css'],
+          })
+          export class Greet {
+            @Input()
+            name: string;
+            age: number;
+          }
+        `);
+       }));
+
+    it('should recomiple when the html file changes',
+       expectRecompile(() => { write('greet.html', '<p> Hello {{name}} again!</p>'); }));
+
+    it('should recompile when the css file changes',
+       expectRecompile(() => { write('greet.css', `p.greeting { color: blue }`); }));
+  });
 });