fix(@ngtools/webpack): fix dependency for non-css style factories

Author: filipesilva

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

@@ -828,7 +828,7 @@ export class AngularCompilerPlugin implements Tapable {
         this._emitSkipped = !emitResult || emitResult.emitSkipped;
 
         // Reset changed files on successful compilation.
-        if (this._emitSkipped && this._compilation.errors.length === 0) {
+        if (!this._emitSkipped && this._compilation.errors.length === 0) {
           this._compilerHost.resetChangedFileTracker();
         }
         timeEnd('AngularCompilerPlugin._update');
@@ -872,7 +872,9 @@ export class AngularCompilerPlugin implements Tapable {
         // We also need to all changed files as dependencies of this file, so that all of them
         // will be watched and trigger a rebuild next time.
         outputText = '';
-        errorDependencies = this._getChangedCompilationFiles();
+        errorDependencies = this._getChangedCompilationFiles()
+          // These paths are used by the loader so we must denormalize them.
+          .map((p) => this._compilerHost.denormalizePath(p));
       }
     } else {
       // Check if the TS file exists.
@@ -923,9 +925,14 @@ export class AngularCompilerPlugin implements Tapable {
       .reduce((prev, curr) => prev.concat(curr), [])
       .map((resourcePath) => path.resolve(path.dirname(resolvedFileName), resourcePath))
       .reduce((prev, curr) =>
-        prev.concat(...this._resourceLoader.getResourceDependencies(curr)), []);
+        prev.concat(...this.getResourceDependencies(curr)), []);
 
-    return [...esImports, ...resourceImports];
+    // These paths are meant to be used by the loader so we must denormalize them.
+    return [...esImports, ...resourceImports].map((p) => this._compilerHost.denormalizePath(p));
+  }
+
+  getResourceDependencies(fileName: string): string[] {
+    return this._resourceLoader.getResourceDependencies(fileName);
   }
 
   // This code mostly comes from `performCompilation` in `@angular/compiler-cli`.

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

@@ -118,6 +118,10 @@ export class WebpackCompilerHost implements ts.CompilerHost {
     return path.replace(/\\/g, '/');
   }
 
+  denormalizePath(path: string) {
+    return path.replace(/\//g, sep);
+  }
+
   resolve(path: string) {
     path = this._normalizePath(path);
     if (path[0] == '.') {
@@ -161,7 +165,9 @@ export class WebpackCompilerHost implements ts.CompilerHost {
 
   getNgFactoryPaths(): string[] {
     return Object.keys(this._files)
-      .filter(fileName => fileName.endsWith('.ngfactory.js') || fileName.endsWith('.ngstyle.js'));
+      .filter(fileName => fileName.endsWith('.ngfactory.js') || fileName.endsWith('.ngstyle.js'))
+      // These paths are used by the virtual file system decorator so we must denormalize them.
+      .map((path) => this.denormalizePath(path));
   }
 
   invalidate(fileName: string): void {
@@ -291,7 +297,8 @@ export class WebpackCompilerHost implements ts.CompilerHost {
 
   readResource(fileName: string) {
     if (this._resourceLoader) {
-      const denormalizedFileName = fileName.replace(/\//g, sep);
+      // These paths are meant to be used by the loader so we must denormalize them.
+      const denormalizedFileName = this.denormalizePath(fileName);
       const resourceDeps = this._resourceLoader.getResourceDependencies(denormalizedFileName);
 
       if (this._cachedResources[fileName] === undefined

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

@@ -581,18 +581,35 @@ export function ngcLoader(this: LoaderContext & { _compilation: any }, source: s
             result.sourceMap = JSON.stringify(sourceMap);
           }
 
-          // Dependencies must use system path separator.
-          // TODO: move the denormalizer into it's own helper.
-          result.errorDependencies.forEach(dep => this.addDependency(dep.replace(/\//g, path.sep)));
-          const dependencies = plugin.getDependencies(sourceFileName);
-          dependencies.forEach(dep => this.addDependency(dep.replace(/\//g, path.sep)));
-
-          // Also add the original file dependencies to virtual files.
-          const virtualFilesRe = /\.(?:ngfactory|css\.shim\.ngstyle)\.js$/;
-          if (virtualFilesRe.test(sourceFileName)) {
-            const originalFile = sourceFileName.replace(virtualFilesRe, '.ts');
+          // Manually add the dependencies for TS files.
+          // Type only imports will be stripped out by compilation so we need to add them as
+          // as dependencies.
+          // Component resources files (html and css templates) also need to be added manually for
+          // AOT, so that this file is reloaded when they change.
+          if (sourceFileName.endsWith('.ts')) {
+            result.errorDependencies.forEach(dep => this.addDependency(dep));
+            const dependencies = plugin.getDependencies(sourceFileName);
+            dependencies.forEach(dep => this.addDependency(dep));
+          }
+
+          // NgFactory files depend on the component template, but we can't know what that file
+          // is (if any). So we add all the dependencies that the original component file has
+          // to the factory as well, which includes html and css templates.
+          const ngFactoryRe = /\.ngfactory.js$/;
+          if (ngFactoryRe.test(sourceFileName)) {
+            const originalFile = sourceFileName.replace(ngFactoryRe, '.ts');
             const origDependencies = plugin.getDependencies(originalFile);
-            origDependencies.forEach(dep => this.addDependency(dep.replace(/\//g, path.sep)));
+            origDependencies.forEach(dep => this.addDependency(dep));
+          }
+
+          // NgStyle files depend on the style file they represent.
+          // E.g. `some-style.less.shim.ngstyle.js` depends on `some-style.less`.
+          // Those files can in turn depend on others, so we have to add them all.
+          const ngStyleRe = /\.shim\.ngstyle\.js$/;
+          if (ngStyleRe.test(sourceFileName)) {
+            const styleFile = sourceFileName.replace(ngStyleRe, '');
+            const styleDependencies = plugin.getResourceDependencies(styleFile);
+            styleDependencies.forEach(dep => this.addDependency(dep));
           }
 
           timeEnd(timeLabel);

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

@@ -1,5 +1,4 @@
 import { Stats } from 'fs';
-import { sep } from 'path';
 
 import { InputFileSystem, NodeWatchFileSystemInterface, Callback } from './webpack';
 import { WebpackCompilerHost } from './compiler_host';
@@ -31,8 +30,7 @@ export class VirtualFileSystemDecorator implements InputFileSystem {
   }
 
   getVirtualFilesPaths() {
-    return this._webpackCompilerHost.getNgFactoryPaths()
-      .map((fileName) => fileName.replace(/\//g, sep));
+    return this._webpackCompilerHost.getNgFactoryPaths();
   }
 
   stat(path: string, callback: Callback<any>): void {