fix(@ngtools/webpack): fix ngtools/webpack to properly use Host<>

Author: hansl

packages/angular_devkit/build_webpack/src/angular-cli-files/models/webpack-configs/typescript.ts

@@ -1,6 +1,7 @@
 // tslint:disable
 // TODO: cleanup this file, it's copied as is from Angular CLI.
-
+import { virtualFs } from '@angular-devkit/core';
+import { Stats } from 'fs';
 import * as path from 'path';
 import { stripIndent } from 'common-tags';
 import {
@@ -19,7 +20,12 @@ const webpackLoader: string = g['angularCliIsLocal']
   : '@ngtools/webpack';
 
 
-function _createAotPlugin(wco: WebpackConfigOptions, options: any, useMain = true) {
+function _createAotPlugin(
+  wco: WebpackConfigOptions,
+  options: any,
+  host: virtualFs.Host<Stats>,
+  useMain = true,
+) {
   const { appConfig, root, buildOptions } = wco;
   options.compilerOptions = options.compilerOptions || {};
 
@@ -102,22 +108,23 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any, useMain = tru
     additionalLazyModules,
     nameLazyFiles: buildOptions.namedChunks,
     forkTypeChecker: buildOptions.forkTypeChecker,
-    ...options
+    ...options,
+    host,
   };
   return new AngularCompilerPlugin(pluginOptions);
 }
 
-export function getNonAotConfig(wco: WebpackConfigOptions) {
+export function getNonAotConfig(wco: WebpackConfigOptions, host: virtualFs.Host<Stats>) {
   const { appConfig, root } = wco;
   const tsConfigPath = path.resolve(root, appConfig.tsConfig);
 
   return {
     module: { rules: [{ test: /\.ts$/, loader: webpackLoader }] },
-    plugins: [_createAotPlugin(wco, { tsConfigPath, skipCodeGeneration: true })]
+    plugins: [_createAotPlugin(wco, { tsConfigPath, skipCodeGeneration: true }, host)]
   };
 }
 
-export function getAotConfig(wco: WebpackConfigOptions) {
+export function getAotConfig(wco: WebpackConfigOptions, host: virtualFs.Host<Stats>) {
   const { root, buildOptions, appConfig } = wco;
   const tsConfigPath = path.resolve(root, appConfig.tsConfig);
 
@@ -133,11 +140,11 @@ export function getAotConfig(wco: WebpackConfigOptions) {
 
   return {
     module: { rules: [{ test, use: loaders }] },
-    plugins: [_createAotPlugin(wco, { tsConfigPath })]
+    plugins: [_createAotPlugin(wco, { tsConfigPath }, host)]
   };
 }
 
-export function getNonAotTestConfig(wco: WebpackConfigOptions) {
+export function getNonAotTestConfig(wco: WebpackConfigOptions, host: virtualFs.Host<Stats>) {
   const { root, appConfig } = wco;
   const tsConfigPath = path.resolve(root, appConfig.tsConfig);
 
@@ -152,6 +159,6 @@ export function getNonAotTestConfig(wco: WebpackConfigOptions) {
 
   return {
     module: { rules: [{ test: /\.ts$/, loader: webpackLoader }] },
-    plugins: [_createAotPlugin(wco, pluginOptions, false)]
+    plugins: [_createAotPlugin(wco, pluginOptions, host, false)]
   };
 }

packages/angular_devkit/build_webpack/src/browser/index.ts

@@ -35,7 +35,6 @@ import {
   statsToString,
   statsWarningsToString,
 } from '../angular-cli-files/utilities/stats';
-import { WebpackFileSystemHostAdapter } from '../utils/webpack-file-system-host-adapter';
 const webpackMerge = require('webpack-merge');
 
 
@@ -152,12 +151,6 @@ export class BrowserBuilder implements Builder<BrowserBuilderOptions> {
           return;
         }
         const webpackCompiler = webpack(webpackConfig);
-
-        // TODO: fix webpack typings.
-        // tslint:disable-next-line:no-any
-        (webpackCompiler as any).inputFileSystem = new WebpackFileSystemHostAdapter(
-          this.context.host as virtualFs.Host<fs.Stats>,
-        );
         const statsConfig = getWebpackStatsConfig(options.verbose);
 
         const callback: webpack.compiler.CompilerCallback = (err, stats) => {
@@ -277,8 +270,8 @@ export class BrowserBuilder implements Builder<BrowserBuilderOptions> {
 
     if (wco.appConfig.main || wco.appConfig.polyfills) {
       const typescriptConfigPartial = wco.buildOptions.aot
-        ? getAotConfig(wco)
-        : getNonAotConfig(wco);
+        ? getAotConfig(wco, this.context.host as virtualFs.Host<fs.Stats>)
+        : getNonAotConfig(wco, this.context.host as virtualFs.Host<fs.Stats>);
       webpackConfigs.push(typescriptConfigPartial);
     }
 

packages/angular_devkit/build_webpack/src/karma/index.ts

@@ -12,7 +12,8 @@ import {
   BuilderConfiguration,
   BuilderContext,
 } from '@angular-devkit/architect';
-import { Path, getSystemPath, normalize, resolve } from '@angular-devkit/core';
+import { Path, getSystemPath, normalize, resolve, virtualFs } from '@angular-devkit/core';
+import * as fs from 'fs';
 import { Observable } from 'rxjs/Observable';
 import * as ts from 'typescript'; // tslint:disable-line:no-implicit-dependencies
 import {
@@ -158,7 +159,7 @@ export class KarmaBuilder implements Builder<KarmaBuilderOptions> {
     const webpackConfigs: {}[] = [
       getCommonConfig(wco),
       getStylesConfig(wco),
-      getNonAotTestConfig(wco),
+      getNonAotTestConfig(wco, this.context.host as virtualFs.Host<fs.Stats>),
       getTestConfig(wco),
     ];
 

packages/angular_devkit/core/src/virtual-fs/host/buffer.ts

@@ -46,7 +46,11 @@ export function stringToFileBuffer(str: string): FileBuffer {
 }
 
 export function fileBufferToString(fileBuffer: FileBuffer): string {
-  if (typeof TextDecoder !== 'undefined') {
+  if (fileBuffer.toString.length == 1) {
+    return (fileBuffer.toString as (enc: string) => string)('utf-8');
+  } else if (typeof Buffer !== 'undefined') {
+    return new Buffer(fileBuffer).toString('utf-8');
+  } else if (typeof TextDecoder !== 'undefined') {
     // Modern browsers implement TextEncode.
     return new TextDecoder('utf-8').decode(new Uint8Array(fileBuffer));
   } else {

packages/ngtools/webpack/package.json

@@ -31,6 +31,7 @@
     "webpack-sources": "^1.1.0"
   },
   "peerDependencies": {
+    "@angular-devkit/core": "0.0.0",
     "typescript": "~2.5.0 | ~2.6.0 | ~2.7.0",
     "webpack": "^4.0.0"
   }

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -8,6 +8,7 @@
 // TODO: fix webpack typings.
 // tslint:disable-next-line:no-global-tslint-disable
 // tslint:disable:no-any
+import { virtualFs } from '@angular-devkit/core';
 import { ChildProcess, ForkOptions, fork } from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
@@ -87,6 +88,8 @@ export interface AngularCompilerPluginOptions {
 
   // Use tsconfig to include path globs.
   compilerOptions?: ts.CompilerOptions;
+
+  host: virtualFs.Host<fs.Stats>;
 }
 
 export enum PLATFORM {
@@ -258,7 +261,11 @@ export class AngularCompilerPlugin {
     }
 
     // Create the webpack compiler host.
-    const webpackCompilerHost = new WebpackCompilerHost(this._compilerOptions, this._basePath);
+    const webpackCompilerHost = new WebpackCompilerHost(
+      this._compilerOptions,
+      this._basePath,
+      this._options.host,
+    );
     webpackCompilerHost.enableCaching();
 
     // Create and set a new WebpackResourceLoader.