feat(@ngtools/webpack): adjust changed file extensions based on usage

Author: clydin

packages/@ngtools/webpack/src/angular_compiler_plugin.ts

@@ -103,6 +103,7 @@ export class AngularCompilerPlugin implements Tapable {
   private _platform: PLATFORM;
   private _JitMode = false;
   private _emitSkipped = true;
+  private _changedFileExtensions = new Set(['ts', 'html', 'css']);
 
   // Webpack plugin.
   private _firstRun = true;
@@ -292,9 +293,22 @@ export class AngularCompilerPlugin implements Tapable {
       .filter(k => this._compilerHost.fileExists(k));
   }
 
+  updateChangedFileExtensions(extension: string) {
+    if (extension) {
+      this._changedFileExtensions.add(extension);
+    }
+  }
+
   private _getChangedCompilationFiles() {
     return this._compilerHost.getChangedFilePaths()
-      .filter(k => /\.(?:ts|html|css|scss|sass|less|styl)$/.test(k));
+      .filter(k => {
+        for (const ext of this._changedFileExtensions) {
+          if (k.endsWith(ext)) {
+            return true;
+          }
+        }
+        return false;
+      });
   }
 
   private _createOrUpdateProgram() {
@@ -877,12 +891,16 @@ export class AngularCompilerPlugin implements Tapable {
     const resourceImports = findResources(sourceFile)
       .map((resourceReplacement) => resourceReplacement.resourcePaths)
       .reduce((prev, curr) => prev.concat(curr), [])
-      .map((resourcePath) => path.resolve(path.dirname(resolvedFileName), resourcePath))
-      .reduce((prev, curr) =>
-        prev.concat(...this.getResourceDependencies(curr)), []);
+      .map((resourcePath) => path.resolve(path.dirname(resolvedFileName), resourcePath));
 
     // These paths are meant to be used by the loader so we must denormalize them.
-    return [...esImports, ...resourceImports].map((p) => this._compilerHost.denormalizePath(p));
+    const uniqueDependencies =  new Set([
+      ...esImports,
+      ...resourceImports,
+      ...this.getResourceDependencies(resolvedFileName)
+    ].map((p) => this._compilerHost.denormalizePath(p)));
+
+    return [...uniqueDependencies];
   }
 
   getResourceDependencies(fileName: string): string[] {

packages/@ngtools/webpack/src/loader.ts

@@ -589,7 +589,10 @@ export function ngcLoader(this: LoaderContext & { _compilation: any }, source: s
           if (sourceFileName.endsWith('.ts')) {
             result.errorDependencies.forEach(dep => this.addDependency(dep));
             const dependencies = plugin.getDependencies(sourceFileName);
-            dependencies.forEach(dep => this.addDependency(dep));
+            dependencies.forEach(dep => {
+              plugin.updateChangedFileExtensions(path.extname(dep));
+              this.addDependency(dep);
+            });
           }
 
           // NgFactory files depend on the component template, but we can't know what that file